testing-strategy-architect

Install vitest, @vitejs/plugin-react, jsdom, and @testing-library/react, then create a vitest.config.ts with the jsdom environment, globals enabled, and a setupFiles entry. Add coverage thresholds with the v8 provider to enforce minimum line and function coverage.

Define handlers using http.get and HttpResponse from msw, then create a Node server with setupServer from msw/node. Start it in your test setup file with server.listen and use server.use inside individual tests to override responses for error or empty states.

Mock the database and auth modules with vi.mock before importing the Server Action, then call the action directly and assert on the mocked calls. This lets you verify authenticated behavior and rejection of unauthenticated requests without a running server.

Yes, Playwright supports mobile emulation through device descriptors like iPhone 14 in the projects configuration. You can run the same e2e tests across desktop Chromium and mobile viewports with a single config file.

A common baseline is 80% for lines and functions and 70% for branches, enforced in the Vitest coverage config so CI fails when coverage drops. E2E tests should cover only critical journeys like auth and core workflows rather than chasing percentage targets.

This happens when MSW is started with onUnhandledRequest set to error and a component calls an endpoint with no matching handler. Add a handler for that endpoint in your handlers file or override it per-test with server.use.