JavaScript测试中动态修改Mock返回值的关键技巧包括：1.用mockImplementation配合状态变量实现多阶段响应；2.用mockReturnValueOnce预设调用序列；3.在每个test内重置并重建Mock确保隔离；4.结合act和waitFor同步异步流程。
在 JavaScript 测试中，动态修改 Mock 的返回值是实现多阶段测试（比如模拟不同请求阶段：首次失败、重试成功、或状态逐步变化）的关键技巧。核心思路是：不固定 Mock 的返回值，而是通过闭包、外部变量或 Jest 的 mock 实例方法，在测试用例执行过程中主动控制它的行为。
用 mockImplementation 动态切换逻辑
最直接的方式是在测试中多次调用 mockImplementation，让同一个 Mock 函数在不同调用时返回不同结果：
- 定义一个可变的状态变量（如计数器或状态标记）
- 在
mockImplementation回调中读取该状态，返回对应值 - 在测试步骤中手动更新状态（例如模拟用户点击、触发重试等）
示例：
const apiCall = jest.fn();
let callCount = 0;
apiCall.mockImplementation(() => {
callCount++;
if (callCount === 1) return Promise.reject(new Error('Network failed'));
if (callCount === 2) return Promise.resolve({ data: 'retry success' });
return Promise.resolve({ data: 'final success' });
});
test('handles retry and final success', async () => {
await expect(apiCall()).rejects.toThrow('Network failed');
await expect(apiCall()).resolves.toEqual({ data: 'retry success' });
await expect(apiCall()).resolves.toEqual({ data: 'final success' });
});
用 mockReturnValueOnce 预设调用序列
适合已知调用顺序的场景（如：第一次失败 → 第二次成功）。Jest 提供了 mockReturnValueOnce，按调用顺序依次返回预设值：
- 每次调用都消耗一个预设值，后续调用若无设置则返回
undefined（可配合mockReturnValue设默认值） - 清晰表达“第几次调用应返回什么”，语义明确，适合断言调用次数和顺序
示例：
const fetchUser = jest.fn();
fetchUser
.mockReturnValueOnce(Promise.reject(new Error('Timeout')))
.mockReturnValueOnce(Promise.resolve({ id: 1, name: 'Alice' }))
.mockReturnValue(Promise.resolve({ id: 2, name: 'Bob' })); // 默认返回
test('retries after timeout', async () => {
await expect(fetchUser()).rejects.toThrow('Timeout');
await expect(fetchUser()).resolves.toEqual({ id: 1, name: 'Alice' });
await expect(fetchUser()).resolves.toEqual({ id: 2, name: 'Bob' });
});
在测试中重置并重新配置 Mock
当多个 test 或 describe 块需要不同 Mock 行为时，避免污染，推荐在每个 test 内部完全重置并重建 Mock：
- 使用
jest.clearAllMocks()或mockFn.mockClear()清空调用记录和返回值 - 再用
mockImplementation或mockReturnValueOnce设置新行为 - 确保每个测试独立，不依赖上一个测试的 Mock 状态
示例：
test('shows loading then success', () => {
const renderComponent = jest.fn();
const api = jest.fn();
// 第一阶段：加载中（返回 pending promise）
let resolveFn;
api.mockImplementation(
() => new Promise(resolve => { resolveFn = resolve; })
);
renderComponent(api);
expect(screen.getByText('Loading...')).toBeInTheDocument();
// 第二阶段：完成并渲染数据
resolveFn({ name: 'Test User' });
expect(screen.getByText('Test User')).toBeInTheDocument();
});
结合真实异步流程控制（如 act + waitFor）
如果组件内部有 useEffect、useSWR、或手动轮询等异步副作用，仅改 Mock 不够，还需配合测试工具等待 DOM 更新：
- 用
act()包裹触发状态变更（如点击按钮触发重试） - 用
waitFor等待异步效果完成（如 API 返回后 UI 更新） - 确保 Mock 更新与 React 渲染周期同步，避免 “cannot update state on unmounted component” 等警告
示例（React + RTL）：
test('retries on error and shows success', async () => {
const api = jest.fn();
api.mockRejectedValueOnce(new Error('Failed'));
api.mockResolvedValueOnce({ ok: true });
render(<MyComponent fetchApi={api} />);
fireEvent.click(screen.getByRole('button', { name: /retry/i }));
await waitFor(() => expect(screen.getByText('Success!')).toBeInTheDocument());
});
