Testing

Adding or changing a component means adding or updating its tests.

How to render

• renderWithRouter and renderWithQueryClient live in ~/testing/render. Both create a fresh QueryClient; renderWithRouter also sets up memory history and router context.
• Never mock @tanstack/react-router. Render a real router instead.
• The helper sets only the router options tests assert on (today defaultErrorComponent). Add another option only when a test needs it.

Where tests live

• Next to the file they test: FunctionCard.test.tsx beside FunctionCard.tsx. Never in a __tests__ folder.
• Page tests sit beside their route file and are named after the page component: ui/src/routes/functions/FunctionDetail.test.tsx. Route generation ignores *.test.* files.

Mocking API responses

ui/vitest.setup.ts starts one MSW server backed by the seeded mock store and calls resetHandlers() after each test.

Never call setupServer in a test file. A local server replaces the global one, loses the store baseline, and fails on any endpoint you did not mock.

Layer overrides on top with server.use(...):

import { server } from "~/mocks/server";
import { handlers } from "~/mocks/scenarios/functions/empty-list";

beforeEach(() => {
  server.use(...handlers);
});

Scenario files export a handlers array. Reuse them instead of duplicating handler logic.

Guidelines

• Prefer accessible queries (getByRole, getByText) over test IDs.
• Use userEvent over fireEvent.
• Cover the happy path, error state, and empty state.
• Use findBy queries or waitFor for async results.
• Assert user-visible behavior, not implementation details.

Validate

1. Run task verify.
2. Fix failures and rerun until clean.