Testing — Cheat Sheet

What to Test in a React App

// vitest.config.js
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    setupFiles: './src/test/setup.js',
    globals: true,
  },
})

// src/test/setup.js
import '@testing-library/jest-dom/vitest'      // toBeInTheDocument etc.
import { cleanup } from '@testing-library/react'
afterEach(cleanup)                              // automatic with globals: true

// A render helper, so every test gets the providers the app has
export function renderWithProviders(ui, { route = '/' } = {}) {
  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: false } },   // no retries in tests
  })
  return {
    user: userEvent.setup(),
    ...render(
      <MemoryRouter initialEntries={[route]}>
        <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
      </MemoryRouter>,
    ),
  }
}
// A fresh QueryClient per test, or cached data leaks between them.

Testing Custom Hooks

import { renderHook, act } from '@testing-library/react'

it('increments', () => {
  const { result } = renderHook(() => useCounter(0))

  expect(result.current.count).toBe(0)

  act(() => { result.current.increment() })     // state update -> act

  expect(result.current.count).toBe(1)
})

// result.current is always the LATEST return value. Destructuring
// it early captures a stale snapshot:
const { count } = result.current      // frozen at that moment
act(() => result.current.increment())
expect(count).toBe(1)                 // fails — count is still 0

// act tells React to flush the update and its effects before the
// next assertion. Without it you get the "not wrapped in act"
// warning and assertions that run against the previous render.

// userEvent and the async findBy queries call act internally, which
// is why component tests rarely need it explicitly.

Testing Async Behaviour and the Network

// src/test/server.js
import { setupServer } from 'msw/node'
import { http, HttpResponse } from 'msw'

export const server = setupServer(
  http.get('/api/problems', () => HttpResponse.json([
    { id: 1, slug: 'two-sum', title: 'Two Sum', difficulty: 'easy' },
  ])),
  http.post('/api/submissions', () => HttpResponse.json({ id: 9 }, { status: 201 })),
)

// setup.js
beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
afterEach(() => server.resetHandlers())        // per-test overrides do not leak
afterAll(() => server.close())

// onUnhandledRequest: 'error' is important — an unmocked request
// fails loudly instead of hanging until the test times out.

// Override for one test
server.use(
  http.get('/api/problems', () => new HttpResponse(null, { status: 500 })),
)

Integration Tests — A Whole Feature

it('creates a problem and shows it in the list', async () => {
  const { user } = renderWithProviders(<App />, { route: '/admin/problems/new' })

  await user.type(screen.getByLabelText(/title/i), 'Two Sum')
  await user.selectOptions(screen.getByLabelText(/difficulty/i), 'easy')
  await user.click(screen.getByRole('button', { name: /publish/i }))

  // navigated
  expect(await screen.findByRole('heading', { name: 'Two Sum' })).toBeInTheDocument()

  // and the list was invalidated, not left stale
  await user.click(screen.getByRole('link', { name: /all problems/i }))
  expect(await screen.findByText('Two Sum')).toBeInTheDocument()
})

// This single test would have caught: a broken submit handler, a
// validation rule blocking valid input, a missing invalidation, and
// a wrong redirect. Four unit tests would have caught none of them,
// because each of those bugs lives BETWEEN the units.