我应该如何在 Redux 中对 mapDispatchToProps 进行单元测试？

Question

应如何编写单元测试以确保 mapDispatchToProps 正确返回包装在 dispatch 函数中的操作创建者？

我目前正在使用 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)

Answer 1

我实际上建议您不要尝试这样做。除非您有非常特殊的需要以不寻常的方式使用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? 的文章，其中更详细地介绍了其中一些主题。