Testing React

// what to test, by component kind
// a presentational component (a Badge): a story + visual test; a component test only if it has logic (a variant with a11y implications)
// a form: component test of the full flow (fill, validate, submit, errors, pending, success); the schema has its own unit tests
// a list with selection, sorting, filtering: component test of the behaviours the user sees; a unit test of the sort/filter functions
// a data-driven page: integration test with MSW: loading → content; error → retry; mutation → updated list
// a hook with branching logic (useUndo, usePagination): renderHook tests of the transitions
// a custom input with a mask: component test of typing behaviour (what appears for what is typed; cursor position if you manage it)
// a provider / context: tested through consumers; a direct test only for its reducer
// a route guard / redirect: integration test with the router: unauthenticated → login; authenticated → page
// accessibility: every component test queries by role, so a missing label fails. add vitest-axe / jest-axe for a scan per rendered state
// what not to test: that React renders props (it does); the exact DOM structure; class names; that a mock was called with the right args when the UI result is assertable instead

// a component test in the Testing Library style: queries by what the user perceives; events as the user does them
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

test('transfers money after confirmation', async () => {
  const user = userEvent.setup()
  render(<TransferForm balance={500_00} />, { wrapper: Providers })            // Providers: QueryClient, router, store; the test's own instances
  await user.type(screen.getByRole('textbox', { name: /amount/i }), '150.50')  // by role + accessible name, not by test id or class
  await user.type(screen.getByRole('textbox', { name: /account/i }), '0123456789')
  await user.click(screen.getByRole('button', { name: /review/i }))
  expect(screen.getByRole('heading', { name: /confirm/i })).toBeInTheDocument()
  expect(screen.getByText('₦150.50')).toBeInTheDocument()                        // the parsed, formatted amount: the thing that must be right
  await user.click(screen.getByRole('button', { name: /send/i }))
  expect(await screen.findByRole('status')).toHaveTextContent(/sent/i)           // findBy: waits for the async result (MSW answered)
  expect(screen.getByRole('button', { name: /send/i })).toBeDisabled()           // no double submit
})
// what this test does not know: the state library, the form library, whether the amount is controlled, the component tree, class names.
// what it would catch: a float parse (₦150.5), a missing disabled state, a confirmation that shows the typed string, a broken label (the query fails: an a11y bug IS a test failure).
// the queries, in priority: getByRole > getByLabelText > getByPlaceholderText > getByText > getByDisplayValue > getByAltText > getByTitle > getByTestId (last resort)

// the network boundary: Mock Service Worker intercepts fetch at the request level; components and query caches run for real
import { http, HttpResponse } from 'msw'
import { setupServer } from 'msw/node'
export const server = setupServer(
  http.get('/api/posts/:id', ({ params }) => HttpResponse.json({ id: params.id, title: 'Hello', likes: 41 })),
  http.post('/api/transfers', async ({ request }) => {
    const body = await request.json()
    if (body.amount > 500_00) return HttpResponse.json({ error: 'insufficient' }, { status: 422 })   // the error path is a handler too
    return HttpResponse.json({ id: 'tx_1', amount: body.amount })
  }),
)
beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))   // an unmocked request fails the test: no accidental real calls
afterEach(() => server.resetHandlers())
afterAll(() => server.close())
// per-test overrides: server.use(http.get('/api/posts/:id', () => HttpResponse.error()))   // network failure for this test only
// why not mock fetch / axios / the query hook: you would be testing your mocks. MSW leaves the real code path intact to the wire.
// the same handlers run in the browser (service worker) for Storybook and manual testing: one definition of "the API" for dev and test

// async and timing: the rules that remove flakiness
// 1. await what you query for: findBy* (waits up to 1 s, polling) for anything that appears after an await; getBy* only for what is there now
expect(await screen.findByText(/sent/i)).toBeInTheDocument()
// 2. userEvent, not fireEvent: userEvent.type() fires the sequence a real keyboard does (keydown, keypress, input, keyup per character), goes through
//    React's event system, and respects disabled and pointer-events. fireEvent.change() skips all that and passes tests that fail for users
// 3. act() is implicit in RTL's render / userEvent / findBy; explicit act() is for state updates you trigger outside those (a store.dispatch, a timer)
// 4. fake timers: vi.useFakeTimers(); userEvent.setup({ advanceTimers: vi.advanceTimersByTime }); advance for debounces, not sleep
// 5. waitFor(() => expect(…)) for conditions that are not a single element appearing (a count reaching 3; a mock called twice)
// 6. never: setTimeout in a test to "let things settle"; snapshotting the whole DOM (brittle, reviews nothing); asserting on state (test outputs, not internals)
// 7. Suspense and transitions: findBy handles the fallback → content change; for isPending UI, assert the pending state then the final
// 8. cleanup: RTL unmounts after each test; the QueryClient must be per test (a shared cache leaks data between tests); MSW handlers reset per test