Question

我在我的项目中使用Redux，测试堆栈是Mocha，Chai和Sinon。在特定的Container Component 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)

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

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：预期的间谍被调用一次，但它被称为0次

Answer 1

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

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

之后应该工作！

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

1 个答案: