使用 Jest 对 React/Redux 组件进行单元测试答案

【问题标题】：Unit testing using Jest for React/Redux Component使用 Jest 对 React/Redux 组件进行单元测试
【发布时间】：2016-10-05 12:56:06
【问题描述】：

我正在使用 Jest 测试我连接的组件。这是组件的外观：

import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux';

class MyComponent extends Component {
  constructor(){
    super();
    this.onButtonClick = this.onButtonClick.bind(this);
  }

  onButtonClick(id) {
    dispatch(actions.onButtonClick(id));
  }

  render() {
    return (
      <div onClick={this.onButtonClick} />
    )
  }
}

function mapStateToProps(state) {
  something: state.something
}

MyComponent.propTypes = {
  dispatch: PropTypes.func.isRequired
}

export default connect(mapStateToProps)(MyComponent)

我不确定如何测试“onButtonClick”，因为它会调度一个动作。如何使用 jest 使用正确的参数调用调度。

【问题讨论】：

标签： reactjs redux jestjs enzyme

【解决方案1】：

除了默认导出之外，您还可以导出组件。所以改成：

export class MyComponent extends Component

在您的测试中，您现在可以导入您的实际组件而不是连接的组件。由于您将 dispatch 作为组件的道具，因此您可以在测试中为 dispatch 提供模拟函数或间谍（使用 jasmine 或 sinon 之类的东西），您可以测试是否使用正确的参数调用它.

在此处查看有关 redux 测试的更多信息： http://redux.js.org/docs/recipes/WritingTests.html

【讨论】：