React Redux测试报错：Connect(Dashboard)无法找到store上下文

我有一个使用Redux connect()包裹的Dashboard组件，代码如下：

import React, { Component } from 'react';
import DataTable from './DataTable';
import { connect } from 'react-redux';
class Dashboard extends Component {
  render() {
    return <DataTable />;
  }
}
export default connect()(Dashboard);

对应的测试代码在App.test.js中：

import React from 'react';
import ReactDOM from 'react-dom';
import Dashboard from './components/Dashboard';
it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<Dashboard />, div);
  ReactDOM.unmountComponentAtNode(div);
});
describe('Addition', () => {
  it('knows that 2 and 2 make 4', () => {
    expect(2 + 2).toBe(4);
  });
});

当我执行命令 npm test App.test.js 运行测试时，遇到了如下错误：

不变违规错误：在"Connect(Dashboard)"的上下文中未找到"store"。请将根组件包裹在中，或在connect选项中为传入自定义React上下文提供者，并为Connect(Dashboard)传入对应的React上下文消费者。

这个问题我之前也碰到过！核心原因很简单：被connect()包装后的组件必须在Redux的<Provider>组件内部才能正常渲染——它需要从React上下文中获取Redux Store，而测试环境默认没有这个上下文，所以才会报错。

步骤1：导入必要的Redux模块 #

首先在测试文件顶部导入Redux的Provider组件和createStore方法。如果你项目里已经有根reducer，直接导入就行；如果只是为了测试基础渲染，可以临时写一个空的reducer凑数。

步骤2：创建测试用Store并包裹组件 #

修改测试用例，把<Dashboard>包裹在<Provider>里，同时传入我们创建的测试Store。

修改后的App.test.js代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import Dashboard from './components/Dashboard';
// 新增Redux相关导入
import { Provider } from 'react-redux';
import { createStore } from 'redux';

// 临时空reducer（有项目根reducer的话替换成你的即可）
const rootReducer = (state = {}, action) => state;
const testStore = createStore(rootReducer);

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(
    // 用Provider包裹组件并传入测试Store
    <Provider store={testStore}>
      <Dashboard />
    </Provider>,
    div
  );
  ReactDOM.unmountComponentAtNode(div);
});

describe('Addition', () => {
  it('knows that 2 and 2 make 4', () => {
    expect(2 + 2).toBe(4);
  });
});

为什么这样能解决问题？ #

<Provider>组件会把Redux Store注入到React的全局上下文里，这样被connect()包装的Dashboard组件就能顺利找到Store，自然不会再抛出上下文缺失的错误了。

如果你的项目用的是@testing-library/react而非直接用ReactDOM渲染，写法也是一样的——只要把组件包裹在<Provider>中就行。

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