有非常简单的组件:
从’prop-types’导入PropTypes
从’反应’导入反应
从’react-redux’导入{connect}
class MyComponent extends React.Component {
componentWillMount() {
if (this.props.shouldDoSth) {
this.props.doSth()
}
}
render () {
return null
}
}
MyComponent.propTypes = {
doSth: PropTypes.func.isRequired,
shouldDoSth: PropTypes.bool.isRequired
}
const mapStateToProps = (state) => {
return {
shouldDoSth: state.shouldDoSth,
}
}
const mapDispatchToProps = (dispatch) => ({
doSth: () => console.log('you should not see me')
})
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)
我想测试当shouldDoSth等于true时是否调用doSth.
我写了一个测试:
describe('call doSth when shouldDoSth', () => {
it('calls doSth', () => {
const doSthMock = jest.fn()
const store = mockStore({shouldDoSth: true})
shallow(<MyComponent doSth={doSthMock}/>, { context: { store } }).dive()
expect(doSthMock).toHaveBeenCalled()
})
})
但似乎虽然我将doSth作为道具传递,但它被mapDispatchToProps覆盖,因为console.log(‘我不是模拟’)被执行.
如何正确传递/覆盖/分配doSth函数以使组件使用mock而不是mapDispatchToProps中的函数.或者也许我正在做一些根本不允许的事情,并且有“适当”的方式来测试我的案例.难道我只是模拟调度并检查是否使用正确的参数调用它?
解决方法:
我认为你需要弄清楚的一件事是你是想让doSth成为道具,还是想在mapDispatchToProps中连接一个redux动作.
如果它是一个道具,那么你将它连接到父(容器)中的redux.将其从此组件的mapDispatchToProps中删除.这将使组件更易于测试.
如果你想让它成为在这个组件中连接的redux动作,那么将动作移出这个组件是有意义的,比如actions.js,将它导入到这个组件中,然后在测试jest.mock中模拟它. (‘actions.js’,()=>({doSth:jest.mock()}))