前端状态管理单元测试需隔离逻辑、模拟依赖、验证变更与副作用，不耦合ui，专注纯函数或store模块；用jest/vitest测reducer/selector等无副作用逻辑，mock api测异步流程，避免渲染组件树或全局mock。
为前端状态管理编写独立单元测试，核心是隔离状态逻辑、模拟依赖、验证状态变更和副作用行为。不耦合 UI 组件，只测纯状态函数或类（如 Redux slice、Zustand store、Pinia store、自定义 hook 中的逻辑）。
提取可测试的状态逻辑
避免直接在组件内写状态更新逻辑。把状态计算、更新规则、异步处理等抽离成独立函数或 store 模块：
- Redux：用
createSlice定义 reducer 和 actions，单独导出reducer和initialState - Zustand：将 store 创建逻辑封装在函数中，便于每次测试新建干净实例
- 自定义 Hook：把核心逻辑拆成普通函数（如
calculateNextState），再在 hook 中调用
用 Jest + Testing Library 或纯 Jest 测试纯函数
对 reducer、selector、工具函数等无副作用逻辑，直接调用并断言返回值：
// 示例：测试一个 Redux slice 的 reducer
import { counterReducer } from './counterSlice';
import { increment, decrement } from './counterSlice';
test('increment increases count by 1', () => {
const initialState = { count: 0 };
const state = counterReducer(initialState, increment());
expect(state.count).toBe(1);
});
test('decrement decreases count by 1', () => {
const initialState = { count: 5 };
const state = counterReducer(initialState, decrement());
expect(state.count).toBe(4);
});
测试带异步逻辑的 store（如 API 调用）
关键在于替换真实 API 调用，控制异步流程，并验证状态变化与错误处理：
- 使用
jest.mock()或vi.mock()（Vitest）拦截 API 模块 - 在测试中触发 action 后，用
await waitFor(() => ...)或await Promise.resolve()等待微任务完成 - 检查 store 状态是否更新（如 loading、data、error 字段）、是否派发了正确 action
示例（Zustand + Vitest）：
import { create } from 'zustand';
import { fetchUser } from '@/api/user';
const useUserStore = create((set) => ({
user: null,
loading: false,
error: null,
fetch: async () => {
set({ loading: true });
try {
const user = await fetchUser();
set({ user, loading: false });
} catch (err) {
set({ error: err.message, loading: false });
}
}
}));
// 测试文件
import { act, renderHook } from '@testing-library/react';
import { vi } from 'vitest';
import { useUserStore } from './useUserStore';
vi.mock('@/api/user', () => ({
fetchUser: vi.fn()
}));
test('fetch sets user on success', async () => {
(fetchUser as Mock).mockResolvedValue({ id: 1, name: 'Alice' });
const { result } = renderHook(() => useUserStore());
await act(async () => {
await result.current.fetch();
});
expect(result.current.user).toEqual({ id: 1, name: 'Alice' });
expect(result.current.loading).toBe(false);
});
避免常见陷阱
不要在测试中渲染完整组件树来测状态——那属于集成或 E2E 测试范畴。单元测试应聚焦逻辑本身：
- 不依赖
ReactTestUtils或@testing-library/react渲染组件，除非测的是自定义 Hook 的行为 - 不 mock 全局对象（如
window.fetch）除非必要；优先 mock 具体模块 - 每个测试保持 store 独立实例，防止状态污染（Zustand 可用
create(...)重新创建；Redux 可用configureStore新建） - 测试边界情况：空数据、网络错误、无效输入、重复调用
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
