Reducers as plain functions, and a real Redux store per test
Reducer tests need no rendering at all. For the Redux component, the test builds a real store with preloaded state, so it checks the slice, the selector and the dispatch wiring together.
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.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a renderHook test (live helper style) for useToggle(initial) returning [on, toggle]: it starts at the initial value and flips on toggle.
Write a custom renderWithTheme(ui, { theme }) helper for a ThemeContext, and a test that a ThemedButton shows class dark in dark mode.
Explain it without notes
When do you test a custom hook with renderHook and when through a component?
Why must you read result.current after each update, and why wrap hook calls in act?
How do you test components that need context, a router or a store?
Why are reducers easy to test, and what should reducer tests cover?
Preview
Console
Nothing logged yet.Expected console output
✓ added appends a new, not-done todo
✓ toggled flips one todo and doesn't mutate the old state
✓ unknown actions throw
✓ slice reducer adds the payload
✓ component + real store: clicking adds ten