我正在使用 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 使用正确的参数调用调度。
最佳答案
除了默认导出之外,您还可以导出组件。因此将其更改为:
export class MyComponent extends Component
在测试中,您现在可以导入实际组件而不是连接的组件。由于您将 dispatch
作为组件的支柱,因此您可以在测试中为 dispatch
提供模拟函数或 spy (使用 jasmine 或 sinon 之类的东西),并且您可以测试是否使用正确的参数调用它。
在此处查看有关 redux 测试的更多信息: http://redux.js.org/docs/recipes/WritingTests.html
关于reactjs - 使用 Jest 进行 React/Redux 组件的单元测试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39874586/