Skip to main content

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​

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 playwright test

Component testing​

Component testing uses Storybook with the @storybook/addon-vitest test addon. This setup runs Vitest 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 play method on stories
  • Real browser: tests run in headless Chromium, so you get accurate DOM behavior without the limitations of JSDOM
pnpm test:storybook

For 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​

Unit tests use Vitest with the Node environment for logic that doesn't need a browser (utilities, data transformations, helpers):

pnpm vitest

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.