reactjs - 如何对在 ReactJS/Redux 应用程序中调度操作的组件进行单元测试？

Question

我有一个reactjs组件，它有一个方法doSomething:

doSomething()
{
    this.setState({
        checked: !this.state.checked
    }, function () {
        if (this.state.checked) {
            store.dispatch({type: 'SOMEACTION', data: true});
        }
    });
}

此方法/组件的 chai/mocha 单元测试会是什么样子？如何测试调度已调用？

Answer 1

用 spy 替换调度并检查是否使用正确的参数调用。

您可以使用redux-mock-store在另一个单元测试中测试您的操作是否正确分派(dispatch)到 reducer 。 .

您还可以使用redux-mock-store mock 这里的商店。

虽然你为什么直接调用商店的调度？您通常只想在 props 上调用它，如下所示:this.props.dispatch()，因为当您使用 mapStateToProps 时，调度会自动传递。这意味着您可以只将 spy 作为 Prop 传递下去，而不必模拟整个商店。