Question

我有一个名为“reduxify”的“实用程序”，可以自动为你做很多Redux / React样板文件，因此你不必在每个组件上编写“mapStateToProps”和“mapDispatchToProps”函数，而只需编写你的组件这样：

// usage. 

class Foo extends Component {
  // component stuff
}

export default reduxify(actions, Foo);

reduxify函数（带注释）在这个要点： https://gist.github.com/brianboyko/904d87da2a75c98e8cd5f5352dd69d57

没有评论（为了简洁起见），它产生于下面：

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getStore } from '../store/storeConfig'

export function reduxify(actions, component){ 
  let mapStateToProps = (state) => {
    state = Object.assign({}, state, {store: state}, {getStore: getStore});
    return (state);
  }
  let prepareActions = (actions) => (dispatch) =>
    ({ actions: bindActionCreators(actions.default, dispatch),
       dispatch: dispatch,
     })
  let mapDispatchToProps = (dispatch) => (prepareActions(actions, dispatch))
  return connect(mapStateToProps, mapDispatchToProps)(component);
}

所以，问题是：模拟组件（可以访问提供者的组件）的最佳方法是什么，以便我可以对这个吸盘进行单元测试，将其放在那里供人们使用和享受，而不是感觉像黑客一样？

Answer 1

查看react-redux使用的单元测试，以获取如何测试由<Provider>包裹的组件的示例：https://github.com/reactjs/react-redux/blob/master/test/components/Provider.spec.js#L50-64。基本上，他们只是声明了一个组件，然后用<Provider>组件包裹它，store prop是一个模拟的Redux商店。（他们使用'react-addons-test-utils'来进行测试组件渲染，但使用酶会更容易。）

在你的情况下，你可以监视模拟商店的dispatch()方法，以确保你的组件的动作调度道具按预期调用它。

我如何对将Redux连接到React组件的实用程序进行单元测试？

1 个答案: