Testing
Evolve uses Vitest as the test runner for all frontend tests. Depending on what you’re testing, it’s extended with Storybook (component testing) or Playwright (end-to-end and browser mode).
End-to-end testing
Section titled “End-to-end testing”E2E tests are handled by Playwright and
live in the frontend/site directory. They focus on testing complete
user flows (checkout, login, search) and smoke tests that verify pages
load correctly.
pnpm e2eComponent testing
Section titled “Component testing”Component testing uses Storybook with
the @storybook/addon-vitest test addon. This setup runs Vitest 4 in
browser mode with Playwright as the browser provider, giving you a
real browser environment instead of JSDOM.
How it works:
- Stories as test cases: Storybook automatically tests multiple render states based on your stories
- Interactions: additional user interactions (clicks, form input,
navigation) are tested using the
playmethod on stories - Real browser: tests run in headless Chromium, so you get accurate DOM behavior without the limitations of JSDOM
pnpm test:storybookFor components or hooks that cannot be tested within Storybook, use Vitest with browser mode directly. Avoid JSDOM as it is not a real DOM and often needs excessive mocking for browser APIs.
Unit testing
Section titled “Unit testing”Unit tests use Vitest with the Node environment for logic that doesn’t need a browser (utilities, data transformations, helpers):
pnpm testPrinciples
Section titled “Principles”- Keep test complexity in tests: don’t make components harder to work with just to make them more testable. Test setup and assertions belong in the test file, not in production code.
- Prefer browser mode over JSDOM: when testing anything that touches the DOM, use Storybook or Vitest browser mode for accurate behavior.
- Test behavior, not implementation: focus tests on what the user sees and does, not on internal component state or implementation details.