| title | description |
|---|---|
Testing |
Learn how to set up Next.js with three commonly used testing tools — Cypress, Playwright, Vitest, and Jest. |
In React and Next.js, there are a few different types of tests you can write, each with its own purpose and use cases. This page provides an overview of testing strategies and commonly used tools you can use.
- Unit testing involves testing individual units (or blocks of code) in isolation. In React, units can be a single function, hook, or component.
- Component testing is a more focused version of unit testing where the primary subject of the tests is React components. This may involve testing how components are rendered, their interaction with props, and their behavior in response to user events.
- Integration testing involves testing how multiple units work together. This can be a combination of components, hooks, and functions.
- End-to-End (E2E) Testing involves testing user flows in an environment that simulates real user scenarios, like the browser. This means testing specific tasks (e.g. signup flow) in a production-like environment.
- Snapshot testing involves capturing the rendered output of a component and saving it to a snapshot file. When tests run, the current rendered output of the component is compared against the saved snapshot. Changes in the snapshot are used to indicate unexpected changes in behavior.
Since async Server Components are new to the React ecosystem, some tools do not fully support them. In the meantime, we recommend using End-to-End Testing over Unit Testing for async components.
See the guides below to learn how to set up Next.js with these commonly used testing tools: