React组件测试遇Redux状态错误：找不到react-redux上下文值，如何解决？

错误原因 #

你的组件使用了useSelector、useDispatch等Redux hooks，这些API依赖Redux的Context才能正常工作。但在测试时，你直接渲染了待测试组件，没有像生产环境那样用<Provider>包裹它，导致组件无法获取Redux store的上下文，从而抛出该错误。

解决方案 #

方案1：在测试中直接包裹Provider

以React Testing Library为例，修改测试代码如下：

import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import store from '../src/store'; // 导入你项目中的Redux store
import YourComponent from '../src/YourComponent'; // 替换为你的待测试组件

test('测试组件的核心功能', () => {
  render(
    <Provider store={store}>
      <YourComponent />
    </Provider>
  );
  // 这里编写你的测试断言逻辑
});

方案2：封装复用的测试渲染函数

如果多个测试都需要包裹Provider，可以创建一个工具函数来复用逻辑，避免重复代码：

// 在测试目录下创建test-utils.js
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import store from '../src/store';

export const renderWithRedux = (ui, { customStore = store } = {}) => {
  return render(
    <Provider store={customStore}>
      {ui}
    </Provider>
  );
};

之后在测试文件中使用这个工具函数：

import { renderWithRedux } from './test-utils';
import YourComponent from '../src/YourComponent';

test('测试组件的核心功能', () => {
  renderWithRedux(<YourComponent />);
  // 这里编写你的测试断言逻辑
});

额外说明 #

从你的index.js截图可以看到，生产环境中你已经用<Provider>包裹了根组件，所以项目运行正常。但测试是单独渲染单个组件的场景，必须手动为待测试组件添加Provider，才能让Redux hooks正常获取上下文。

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