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

我正在使用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)

import React，{Component，PropTypes}来自'React'；
从'react redux'导入{connect}；
类MyComponent扩展组件{
构造函数（）{
超级（）；
this.onButtonClick=this.onButtonClick.bind（this）；
}
onButtonClick（id）{
调度（actions.onButtonClick（id））；
}
render（）{
返回(
)
}
}
函数MapStateTops（状态）{
某物：国家，某物
}
MyComponent.propTypes={
调度：需要PropTypes.func.isRequired
}
导出默认连接（MapStateTrops）（MyComponent）

---

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

除了默认导出之外，您还可以导出组件。因此，将其更改为：

export class MyComponent extends Component

在测试中，现在可以导入实际组件而不是连接的组件。由于组件的支柱是

dispatch

，因此您可以在测试中为

dispatch

提供模拟函数或间谍（使用类似jasmine或sinon的东西），并且您可以测试是否使用正确的参数调用了它

在此处查看有关redux测试的更多信息：