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

Question

如何编写单元测试以确保mapDispatchToProps正确返回被dispatch包装的action creator?

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

- therewillbecode

Answer 1

我实际上建议你不要尝试那样做。除非你有一个非常特定的需要以一种不寻常的方式使用dispatch，否则我鼓励你只使用connect支持的对象简写语法。如果你将一个充满动作创建者的对象作为第二个参数传递给connect，它会自动通过bindActionCreators运行该对象。因此，在这种情况下，它将是export default connect(mapState, LayerActions)(App)。

我确实看到你正在将该调用的结果作为名为actions的prop返回。我最初也这样做，但最终放弃了，因为它需要我的某些组件“知道”它们连接到Redux（即必须调用this.props.actions.someActionCreator()而不是this.props.someActionCreator()）。

我撰写了一篇名为Idiomatic Redux：为什么使用动作创建者？的文章，更详细地涵盖了一些这些主题。

- markerikson

---

太棒了，非常感谢。如果我将我的操作对象文字传递为第二个参数，那么我该如何将由Connect注入的操作传递到Sidebar子组件中？ - therewillbecode

通常情况下，您需要收集与操作相关的道具，并将它们传递下去。这可以是显式的（const {firstAction} = props），也可以是更全面的（const {layers, ...allOtherProps} = props）。无论哪种方式，都要提取它们，然后使用这些道具呈现侧边栏。 - markerikson