我应该如何在Redux中测试mapDispatchToProps？

如何编写单元测试以确保mapDispatchToProps正确返回包装在调度功能中的动作创建者？我应该如何在Redux中测试mapDispatchToProps？

我目前使用摩卡和酵素进行测试。

这是我的容器组件。

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)

来源

2016-12-14 therewillbecode

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

来源

2016-12-14 17:36:15 markerikson

很好。非常感谢。如果我将对象字面量作为第二个参数传入，那么如何将由Connect注入的注入操作传递到边栏子组件？ – therewillbecode

您通常需要将动作相关的道具放在一起，然后传递给他们。这可能是显式的（'const {firstAction} = props'），或者更像是一个全面的（'const {layers，... allOtherProps} = props'）。无论哪种方式，提取它们，然后使用这些道具渲染侧边栏。 – markerikson

我应该如何在Redux中测试mapDispatchToProps？

回答

相关问题