如何测试是否在 componentDidMount 中调用了特定操作？答案

【问题标题】：How to test whether particular action was called in componentDidMount?如何测试是否在 componentDidMount 中调用了特定操作？
【发布时间】：2017-02-01 22:10:50
【问题描述】：

我在我的项目中使用 Redux，用于测试堆栈的是 Mocha、Chai 和 Sinon。在特定的容器组件 ABC 的 componentDidMount 中调度了一个动作 xyz。在 ABC 的单元测试中，我想检查是否调用了 xyz。 ABC的代码

import {xyz} from 'action';
class ABC extends React.Component {
   componentDidMount(){
   // some other magic
   this.props.xyz();
   }
   render(){
   // return html
   }
}
function mapDispatchToProps(dispatch) {
       return bindActionCreators({xyz});  
 } 
export default connect(mapStateToProps, mapDispatchToProps)(ABC)

检查是否从componentDidMount调用xyz失败的单元测试

import {xyz} from 'path to xyz action';
import {ABC} from 'path to ABC';
import {Provider} from 'react-redux'
describe('ABC', function () {
     it('renders correctly', function () {
           let store = {} // fake store object
           let actionSpy = sinon.spy(xyz);
           let wrapper = mount(
            <Provider store={store}
              <ABC/>
            </Provider>);
           actionSpy.should.have.callCount(1);
    });
});

当通过日志消息确认测试运行时，将调用操作 xyz。失败消息是 AssertionError: expected spy to have been called just once, but it was called 0 times

【问题讨论】：

标签： unit-testing reactjs redux mocha.js sinon

【解决方案1】：

好吧，鉴于您正在导入组件的解包版本，您根本没有传递任何道具（商店没有将道具注入您的组件）。因此，您应该将该间谍传递给您的组件：

mount(<ABC xyz={actionSpy} />);

应该在那之后工作！

【讨论】：

我试过了，它不起作用，我没有导入组件的解包版本。
我明白了，那么你什么都没有导入，因为你有 import {ABC} from 'path to ABC'; 这是一个命名导入。如果您要导出未包装的组件，那么您可能会有更好的运气。无论如何，这是一个测试 redux 组件的好模式。您可能正在导入包装的组件，并且商店正在覆盖您正在传递的道具。
包装后的组件怎么办？
简短回答？你不能。被包装的组件将直接传递绑定的动作创建者，这意味着你不能在那里放置间谍。