Question

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

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

这个方法/组件的chai / mocha unittest是什么样的？如何测试调度已调用？

Answer 1

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

您可以使用redux-mock-store测试您的操作是否在使用redux-mock-store的其他单元测试中正确分派给Reducer。

您也可以使用masonry layout在此处模拟商店。

虽然你为什么直接在商店打电话？您通常只想在道具上调用它：this.props.dispatch()，因为当您使用mapStateToProps时，调度会自动传递。这意味着你可以将间谍作为支柱传递而不是模仿整个商店。

Answer 2

您可以使用expect，例如使用spy来确保调用该方法以及断言状态已更改。

// spy on the method to assert that it has been called
const doSomething = expect.spyOn(ExampleComponent, 'doSomething');
// simulate some behaviour
...
// assert method called
expect(doSomething).totHaveBeenCalled();
// assert state changed
assert.equal(store.getState()..., ...)

此外，您可以将其拆分为多个测试。

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

2 个答案: