Testing

Testing

Tests are not optional — when adding or modifying a component, add or update the corresponding tests.

Gotchas

• Route-level views that use useSearch, useParams, or loaders must use renderWithRouter from ~/testing/render, not the standard render. Using standard render will fail because route hooks need router context.
• MSW handlers from scenarios should be reused in tests — don't duplicate handler logic. Import from ~/mocks/scenarios/.
• Test files live alongside the code they test (WidgetsList.test.tsx next to WidgetsList.tsx), not in a separate __tests__ directory.

Which Render Helper to Use

• Route-level views → renderWithRouter from ~/testing/render (sets up router, query client, memory history)
• Standalone components (no route dependency) → standard render from @testing-library/react
• Pure utility functions → test directly, no render needed

MSW in Tests

import { setupServer } from "msw/node";
import { getMyHandlers } from "~/mocks/scenarios/myFeature/myScenario";

const server = setupServer(...getMyHandlers());

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Guidelines

• Prefer screen.getByRole, screen.getByText, and other accessible queries over test IDs
• Use userEvent over fireEvent for realistic interaction simulation
• Test loading states, error states, and empty states — not just the happy path
• For async operations, use waitFor or findBy queries

Validate

1. Run task ui:test and verify tests pass
2. If tests fail, fix the issues and rerun until clean