Prevent hook state from leaking between tests
React component tests
Zustand · Const
testing stores
The testing guide shows how to mock Zustand's creators and reset every store to its initial state after each test. The pattern supports both React-bound and standalone stores.
How it works
The testing guide recommends mocking Zustand's store creators, capturing each store's initial state, and registering a reset function that replaces the current state with that snapshot. An afterEach hook then invokes all registered resets inside act, isolating tests while supporting both React-bound and standalone stores.
Syntax
afterEach(() => {
act(() => {
storeResetFns.forEach((resetFn) => resetFn())
})
})Key points
- Keep reset callbacks in a shared collection so one lifecycle hook can clean up every store.
- Capture each store's baseline immediately after creation, before tests can mutate it.
- Restore the full snapshot using replacement semantics rather than merging it into the current state.
- Choose the reset wrapper that matches the store creator: create for hook-bound stores and createStore for vanilla stores.
Common mistakes
- The reset behavior is supplied through a test-runner mock rather than by changing production store code.
- If cleanup is omitted, state can leak from one test into the next.
Example: Reset stores after each test
import { act } from '@testing-library/react'
import { storeResetFns } from './__mocks__/zustand'
afterEach(() => {
act(() => {
storeResetFns.forEach((reset) => reset())
})
})After each test, run every registered reset function inside React's act helper so stores return to their initial state.
When to use it
Return shared stores to a known baseline
Store unit tests
Reset both hook-bound and vanilla stores
Mixed Zustand applications
Interview questions
QHow does the documented reset strategy isolate tests?
The mock wraps Zustand's creators, records each store's initial state, and adds a reset callback to a shared set. The test lifecycle invokes those callbacks after every test inside act.
Follow-up: Why capture getInitialState instead of reading state during cleanup? The initial snapshot represents the store's baseline, while cleanup state may already contain mutations from the test.
QWhy are both create and createStore covered?
The guide handles both create and createStore because Zustand exposes React-bound and vanilla store creators. The mock preserves the actual exports while replacing the creation functions with reset-aware wrappers.
Follow-up: What broader design concern does this address? Tests may use either hook-based stores or standalone stores, so resetting only one creator leaves coverage gaps.
QHow is the original state restored?
The reset callback calls setState with the saved initial state and the replace flag enabled. That replaces the complete store state instead of shallowly merging the snapshot with leftovers.
Follow-up: When would replacement be especially valuable? It prevents keys introduced or retained during a test from surviving cleanup.
Related
createcreateStoregetInitialStatesetStateactJestVitest