在 React Redux 中进行测试

Question

我有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 运行测试。

我遇到错误

Invariant Violation: Could not find "store" in the context of "Connect(Dashboard)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Dashboard) in connect options.

Answer 1

你的Dashboard 连接到redux，需要一个store。你有两种可能：

• 使用Enzyme 和redux-mock-store 来配置安装组件时使用的存储。这不好维护，并且会导致 Component 和 store 之间存在很强的依赖关系。

• 导出未连接的仪表板（除了默认的导出连接），并安装（最终使用所需的道具）。这更简单且可维护。

export class Dashboard extends Component {
   render() {
     return <DataTable />;
   }
}


// Test :

import { Dashboard } from './components/Dashboard';

ReactDOM.render(<Dashboard />, div);

注意：我认为您出于示例目的简化了您的 connect()，因为它在这里没有做任何事情，但如果这是您的实际实现，您可以删除连接部分并仍然使用测试的默认导出。