测试使用Redux Toolkit的React组件时如何模拟Redux store状态

方案1：使用redux-mock-store（你记忆中的npm测试包就是该工具） #

专门用于Redux场景的单元测试，可以快速自定义初始状态，支持捕获组件触发的dispatch动作做断言。

步骤1：安装依赖 #

# NPM安装
npm install redux-mock-store @types/redux-mock-store --save-dev
# Yarn安装
yarn add redux-mock-store @types/redux-mock-store -D

纯JS项目可以不用安装@types/redux-mock-store类型包。

步骤2：编写测试用例 #

import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
// 引入项目中用到的Redux中间件，比如thunk
import thunk from 'redux-thunk';
import { DetailsItem } from './你的组件文件路径';

// 初始化mock store构造器，传入项目用到的中间件数组
const mockStore = configureMockStore([thunk]);

describe('DetailsItem', () => {
  it('非编辑模式下渲染DetailsItemDisplay组件', () => {
    // 初始状态结构必须和你项目Redux根状态结构完全匹配
    const initialState = {
      editMode: {
        isInEditMode: false
      }
    };
    const store = mockStore(initialState);

    render(
      <Provider store={store}>
        <DetailsItem />
      </Provider>
    );

    // 补充你的断言逻辑示例
    expect(screen.getByTestId('details-display')).toBeInTheDocument();
  });

  it('编辑模式下渲染DetailsItemEdit组件', () => {
    const initialState = {
      editMode: {
        isInEditMode: true
      }
    };
    const store = mockStore(initialState);

    render(
      <Provider store={store}>
        <DetailsItem />
      </Provider>
    );

    expect(screen.getByTestId('details-edit')).toBeInTheDocument();
  });
});

方案2：无额外依赖，复用项目真实Store配置 #

如果你的项目用Redux Toolkit，也可以直接用官方的configureStore传入初始状态，无需安装额外包：

import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
// 导入你项目中的editMode切片reducer
import editModeReducer from './你的editMode切片路径';
import { DetailsItem } from './你的组件文件路径';

describe('DetailsItem', () => {
  it('非编辑模式下渲染DetailsItemDisplay组件', () => {
    const store = configureStore({
      reducer: {
        editMode: editModeReducer
      },
      preloadedState: {
        editMode: {
          isInEditMode: false
        }
      }
    });

    render(
      <Provider store={store}>
        <DetailsItem />
      </Provider>
    );

    expect(screen.getByTestId('details-display')).toBeInTheDocument();
  });
});

注意事项 #

• 传入的初始状态结构必须和项目实际Redux根状态结构完全一致，否则useAppSelector无法读取到正确的isInEditMode值
• 可以给DetailsItemDisplay、DetailsItemEdit组件加上data-testid属性方便测试时查找元素

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