Command Palette

Search for a command to run...

Hectal
Phase 17Advanced18 of 28 in React

Testing React

Test React apps the way users use them: Vitest and Testing Library, role queries, user-event, async UI, mocks, hooks, context, and end-to-end checks with Playwright.

A test is a small program that uses your app and checks the result, so you find out a change broke something before your users do. This phase teaches the modern way to test React: render a component, find things the way a person would (by their role and label), act like a user with user-event, and check what appears on the screen.

You'll set up Vitest and React Testing Library, learn the query priority that also keeps your app accessible, test loading states, errors and timers, mock network calls with fake functions and MSW, test custom hooks, context and reducers, and finish with Playwright end-to-end, visual and accessibility tests, plus a plan for what to automate where.

Every live example on these pages runs real Testing Library 16 and user-event 14 against React 19 in your browser. There is no Vitest in the preview, so each example has a five-line test() and expect() helper that prints ✓ for a passing test and ✗ for a failing one. The real Vitest files and terminal output are shown next to them.

0/7 · 0%
7 topics ~3 h 30 code blocks & diagrams
Start with the first topic
1
17.1

What and Why to Test

Tests are small programs that use your app and check the result; good React tests check behaviour a user can see, not how the component is built inside, so they catch real bugs and survive refactors.

27 min 1 diagram 3 code practice

2
17.2

Setting Up Vitest and Testing Library

Vitest runs your test files in Node with jsdom pretending to be a browser, React Testing Library renders components into that fake page, and a setup file adds jest-dom matchers and cleans up after each test.

25 min 4 code practice

3
17.3

Rendering and Querying

render() mounts a component into the test page and screen finds elements the way people do: by role and accessible name first, then label, text and the rest, with getBy, queryBy and findBy for present, absent and not-yet-there elements.

26 min 4 code practice

4
17.4

Simulating Users with user-event

user-event plays the full sequence of browser events a real person causes (pointer, focus, keys, input, click), so tests catch bugs that a single fireEvent would hide; always setup() it and await every action.

27 min 4 code practice

5
17.5

Testing Async UI and Mocking

Async UI is tested by waiting for what the user will finally see with findBy and waitFor; the network is replaced with fakes (injected functions, vi.fn/vi.mock, or MSW), timers with fake timers, and an act(...) warning means an update happened that your test didn't wait for.

32 min 6 code practice

6
17.6

Testing Hooks, Context and Reducers

Test custom hooks with renderHook and act, give components and hooks the providers they need through a wrapper (usually inside a custom render helper), and test reducers as plain functions with no React at all.

31 min 4 code practice

7
17.7

End-to-End, Visual and Accessibility Tests

Playwright drives your real built app in real browsers for a few critical journeys, screenshot comparisons catch visual breakage, axe catches common accessibility errors automatically, and a clear plan decides which check lives at which layer.

27 min 4 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Your first two tests

The code has a Greeting component and the little test() / expect() helper used in this phase's examples.

Beginner
2

Make the given tests pass

The tests for a quantity Stepper are already written. Three of them fail. Don't change the tests: fix the component.

Beginner
3

Build a component the tests can find

Build FilterList({ items }) so the three given tests pass. Read them first: they describe exactly what users must be able to do.

Intermediate
4

Test loading, errors and retry

Quote({ loadQuote }) is finished and works. Your job is to write the tests, using fake loadQuote functions you create.

Advanced
5

A tested cart: reducer, hook and UI

Write cartReducer(items, action) and the useCart() hook so the five given tests pass. Items look like { id, name, price, qty } (prices in paise).

Advanced