---
title: Testing
description: Choose the test layer that matches the behavior you need to prove.
sidebar:
  order: 1
---

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](/testing/browser-mode) |
| A deterministic callback, state transition, or threshold branch in Vitest or Jest | [Mock intersections](/testing/mocking-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.