javascript - 我如何对这个连接 Redux 和 React 组件的实用程序进行单元测试？

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”来进行测试组件渲染，但使用 enzyme 会更容易。)

就您而言，您可以监视模拟商店的 dispatch()方法来确保组件的 Action 分派(dispatch)属性按预期调用它。