使用React-testing-library做单元测试渲染组件报找不到store错误如何解决

错误提示：在“Connect(BaseSignUp)”的上下文中找不到“store”，要么将根组件包裹在中，要么在connect配置项中为传入自定义React context provider，同时为Connect(BaseSignUp)传入对应的React context consumer。

报错的核心原因是Connect(BaseSignUp)是Redux的connect高阶组件生成的包装组件，运行时必须从Redux的Provider上下文实例中读取store，测试场景下直接渲染组件没有外层Provider就会触发该错误。你可以根据自己的使用场景选择以下两种解决方案：

方案1：封装通用测试渲染工具（多组件测试推荐） #

自定义react-testing-library的渲染方法，默认包裹Provider，避免每次测试重复写嵌套逻辑：

1. 安装redux-mock-store依赖，用于模拟Redux store的状态和方法
2. 新建测试工具文件自定义渲染逻辑：

// src/utils/test-utils.js
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';

// 可根据业务需要添加redux中间件，比如redux-thunk、redux-saga等
const mockStore = configureMockStore([]);
// 配置通用的默认store状态
const defaultTestStore = mockStore({
  auth: {
    loading: false,
    userInfo: null
  }
});

const renderWithRedux = (ui, option = {}) => {
  const { store = defaultTestStore, ...renderOpts } = option;
  const Wrapper = ({ children }) => <Provider store={store}>{children}</Provider>;
  return render(ui, { wrapper: Wrapper, ...renderOpts });
};

// 导出react-testing-library的所有原生方法，替换render为自定义版本
export * from '@testing-library/react';
export { renderWithRedux as render };

3. 测试用例中直接导入自定义的render方法使用即可：

// BaseSignUp.test.js
import { render, screen } from 'src/utils/test-utils';
import BaseSignUp from './BaseSignUp';
import configureMockStore from 'redux-mock-store';

const mockStore = configureMockStore([]);

test('注册表单正常渲染', () => {
  // 可传入自定义store覆盖默认状态，适配不同测试场景
  const customStore = mockStore({
    auth: {
      errorMsg: '手机号已注册'
    }
  });
  render(<BaseSignUp />, { store: customStore });
  // 正常写断言逻辑即可
  expect(screen.getByRole('form', { name: /注册/i })).toBeInTheDocument();
});

方案2：单次测试手动包裹Provider（单组件临时测试） #

如果仅需测试单个Redux连接组件，不需要复用逻辑，直接在渲染时手动套一层Provider即可：

// BaseSignUp.test.js
import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import BaseSignUp from './BaseSignUp';

const mockStore = configureMockStore([]);

test('注册表单正常渲染', () => {
  const testStore = mockStore({
    auth: { loading: false }
  });
  render(
    <Provider store={testStore}>
      <BaseSignUp />
    </Provider>
  );
  expect(screen.getByRole('form', { name: /注册/i })).toBeInTheDocument();
});

特殊场景适配 #

如果你业务代码中使用了自定义的Redux Context而非默认上下文，只需要保证测试用的Provider传入的context实例，和connect方法配置的context参数完全一致即可，和业务代码的配置保持对齐就不会出现上下文不匹配的问题。

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