React Testing Library搭配useReducer、useContext测试时状态更新异常

• 检查测试中Context的dispatch实现是否正确：你当前自定义的dispatch是直接调用AppReducer(state, action)，每次都传入固定的初始state，返回的新状态没有被存储，也无法触发组件重渲染。开发环境中使用的是标准useReducer会自动维护状态、触发更新，这是两类环境表现不一致的最常见原因。
• 验证工具函数mock是否生效：确认你spyOn的工具路径和组件内导入的路径完全一致，没有默认导出/命名导出混用、相对路径写错的问题，避免mock失效导致挖矿逻辑未执行。
• 检查异步逻辑等待是否充分：如果挖矿逻辑内置了延时、或者你的测试环境运行速度较慢，默认1000ms的waitFor超时可能不足以覆盖执行过程，导致状态还未更新就断言失败。
• 校验Reducer的不可变更新逻辑：确认Reducer中修改preview相关状态时，是返回全新的状态对象，而不是直接修改原state的属性。React状态更新依赖引用变化触发重渲染，直接修改原对象会导致更新无法被检测到，开发环境可能因为其他额外重渲染掩盖了这个问题。

1. 修正测试中Context的状态维护逻辑，不要自定义固定state的dispatch，改用标准useReducer封装测试用的Provider：

// 测试代码内新增测试用Provider
import { useReducer } from 'react';
const initialState = { /* 你原来的state内容 */ }
const TestAppProvider = ({ children }) => {
  const [state, dispatch] = useReducer(AppReducer, initialState);
  return <AppContext.Provider value={{ state, dispatch }}>{children}</AppContext.Provider>
};

// 渲染时替换原来的Provider
render(
  <TestAppProvider>
    <Statistics chain={false} />
  </TestAppProvider>
);

2. 增加mock函数调用校验，确认逻辑正常执行：

fireEvent.click(screen.getByRole("button", { name: /Block Mine/i }));
// 先确认工具函数被正常调用
await waitFor(() => {
  expect(MineUtil.createTarget).toHaveBeenCalled();
  expect(ConversionUtil.digestMessage).toHaveBeenCalled();
});

3. 给状态更新断言延长超时时间，避免环境性能导致的超时：

await waitFor(() => {
  expect(
    screen.getByRole("textbox", { name: /Block Solution/i })
  ).toHaveClass("valid-solution");
}, { timeout: 3000 });

4. 检查Reducer代码，确保所有状态更新都遵循不可变原则，例如：

// 正确的更新写法
case 'MINING_SUCCESS':
  return {
    ...state,
    preview: {
      ...state.preview,
      valid: true,
      currHash: action.payload.solution
    }
  }
// 禁止直接修改原state的写法：state.preview.valid = true

内容的提问来源于stack exchange，提问作者lbragile