| title | Overview |
|---|---|
| category | Contributing/Testing |
| order | 1 |
This page provides an overview of the testing strategies we use to ensure the quality and stability of our components. We use a combination of modern tools to support our testing needs. Each tool serves a different purpose in our testing pyramid.
These tools are our primary stack for writing component-level unit tests. They are lightweight and fast. Vitest is one of the fastest modern testing framework. It offers a Jest-like API and runs in a Node.js environment, making it ideal for testing individual components and functions in isolation. Paired with React Testing Library, Vitest encourages accessible and maintainable test practices by querying elements the way users interact with them. It's best suited for testing component logic, rendering conditions, and props/state changes without needing a full browser environment.
For more information about our unit tests you can check out our detailed guides and examples.
Cypress Component Testing allows us to mount individual components in a real browser environment for precise interaction testing. Unlike traditional unit tests, it renders with full CSS and browser APIs, offering more realistic behavior. This makes it ideal for testing user interactions like clicks, keyboard navigation, focus traps, and animations. While a bit heavier than Vitest, it provides greate visibility and debugging capabilities for complex UI logic.
For more information check out our detailed guides and examples.
We use Cypress end-to-end (e2e) tests to capture screenshots of every component showcase page in the regression-test Next.js app. A custom pixelmatch-based ui-scripts visual-diff command compares each capture against a baseline stored on the visual-baselines branch and publishes an interactive HTML report to GitHub Pages for every PR. Tests are run after changes are pushed to remote; when differences are detected, the job fails and the sticky PR comment links to the report with inline diff images.
These e2e tests also run Axe accessibility checks and monitor console.errors.
For the full workflow, local dev loop, and how to add a new page, see the visual regression testing guide.