reactjs - 在 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，这需要一个商店。你有两种可能性:

• 使用 Enzyme和 redux-mock-store为了配置在安装组件时使用的商店。这不好维护，并导致组件和商店之间存在很强的依赖性。

• 导出未连接的仪表板(除了默认导出连接)，并挂载(最终使用所需的 Prop )。这更简单且更易于维护。

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


// Test :

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

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

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