使用Enzyme测试含Redux dispatch的React自定义Hook的最佳方案

问题原因 #

你当前校验Redux状态时拿到默认值，核心原因是测试过程中自定义Hook用到的Redux store，和你调用getState做断言的store不是同一个实例，Hook派发的action没有同步到你用来断言的store里。

最佳测试方案 #

前置准备 #

优先用 React Testing Library 完成测试，先封装公共的Redux上下文包裹工具，保证所有测试场景用的store是同一个实例：

import { render, renderHook } from '@testing-library/react';
import { Provider } from 'react-redux';
// 引入你项目内真实的store创建逻辑，不要用redux-mock-store（它只会记录action不会执行reducer更新状态）
import { configureAppStore } from '你的项目store配置文件路径';

// 封装Hook测试的公共方法
const renderHookWithRedux = (hook, initialState = {}) => {
  const store = configureAppStore(initialState);
  const renderRes = renderHook(() => hook(), {
    wrapper: ({ children }) => <Provider store={store}>{children}</Provider>
  });
  return { ...renderRes, store };
};

// 封装组件测试的公共方法
const renderComponentWithRedux = (component, initialState = {}) => {
  const store = configureAppStore(initialState);
  const renderRes = render(
    <Provider store={store}>
      {component}
    </Provider>
  );
  return { ...renderRes, store };
};

方案1：单独测试自定义Hook（优先推荐） #

不需要绑定组件，直接测试Hook返回的回调逻辑即可，测试效率更高：

test('useButtonCallback 触发后正确更新Redux状态', () => {
  // 传入初始状态，拿到Hook返回值和对应store
  const { result, store } = renderHookWithRedux(useButtonCallback, {
    someState: { stateBoolean: false }
  });
  // 调用Hook返回的回调函数
  result.current();
  // 直接断言状态
  expect(store.getState().someState.stateBoolean).toBe(true);
});

方案2：组件集成测试 #

如果要验证组件和Hook的联动效果，用封装好的组件渲染方法测试即可：

import { fireEvent, screen } from '@testing-library/react';

test('点击按钮后正确更新Redux状态', () => {
  // 渲染组件时传入初始状态，拿到对应store
  const { store } = renderComponentWithRedux(<YourButtonComponent />, {
    someState: { stateBoolean: false }
  });
  // 触发按钮点击
  fireEvent.click(screen.getByRole('button'));
  // 断言状态
  expect(store.getState().someState.stateBoolean).toBe(true);
});

注意事项 #

• 如果你的action是异步逻辑（比如用了thunk、saga等中间件），断言前需要用waitFor包裹等待异步执行完成，不要手动调用component.update
• 不要使用redux-mock-store做状态变更校验，它仅用来校验派发的action是否符合预期，不会真实执行reducer更新状态
• 所有测试场景必须保证Hook/组件 所在的Provider注入的store，和你断言用的store是同一个实例

内容的提问来源于stack exchange，提问作者Игор Ташевски