Testing
Choose the test layer that matches the behavior you need to prove.
Intersection Observer tests fall into two groups. Pick the layer first, then follow the guide for that kind of test.
Choose a test layer
| You need to prove… | Start here |
|---|---|
| Real scrolling, geometry, or native observer behavior | Browser Mode |
| A deterministic callback, state transition, or threshold branch in Vitest or Jest | Mock intersections |
The two work together. Browser Mode verifies browser integration, and the mock produces deterministic observer signals. Keep the global mock setup out of native browser tests.
Organize a mixed suite
Give each layer its own named project so the DOM mock never leaks into native browser tests:
| Behavior | Project | Typical files | Setup |
|---|---|---|---|
| Real scrolling, layout, and native observer delivery | browser |
*.browser.test.tsx |
Vitest Browser Mode, with no global test utilities. |
| Deterministic callbacks and thresholds | dom |
*.dom.test.tsx |
happy-dom or jsdom plus test-utils. |
Both guides show the configuration for their own project.