如何编写单元测试以确保mapDispatchToProps正确返回包含在调度函数中的动作创建者?
我目前正在使用Mocha和Enzyme进行测试。
这是我的容器组件。
import { Component } from 'react'
import { connect } from 'react-redux'
import Sidebar from '/components/Sidebar'
import Map from '/components/Map'
import * as LayerActions from '../actions/index'
// Use named export for unconnected component (for tests)
export const App = ({layers, actions} ) => (
<div>
<Sidebar LayerActions={actions} />
<Map />
</div>
)
export const mapStateToProps = state => ({
layers: state.layers
})
export const mapDispatchToProps = dispatch => ({
actions: bindActionCreators(LayerActions, dispatch)
})
// Use default export for the connected component (for app)
export default connect(mapStateToProps, mapDispatchToProps)(App)
答案 0 :(得分:6)
我实际上建议您不尝试这样做。除非您非常特别需要以不寻常的方式使用dispatch
,否则我建议您使用connect
支持的对象速记语法。如果将一个充满动作创建者的对象作为第二个参数传递给connect
,它将自动通过bindActionCreators
为您运行该对象。因此,在这种情况下,它将是export default connect(mapState, LayerActions)(App)
。
我确实看到你将该调用的结果作为名为actions
的道具返回。我开始自己这样做,但最终还是离开了它,因为它需要我的一些组件“知道”它们已连接到Redux(即,必须调用this.props.actions.someActionCreator()
而不是this.props.someActionCreator()
) 。
我写了一篇名为Idiomatic Redux: Why use action creators?的文章,其中更详细地介绍了其中一些主题。