从上下文测试依赖于 store 的组件

Question

我在为依赖于从上下文传递的 redux 存储的组件设置测试时遇到问题...

我的应用有一个根组件，它为其子级提供 redux 存储作为上下文：

import ApplicationStore from './app-store.js'

class Root extends Component {
    getChildContext() {
        return { store: ApplicationStore }
    }
    render(){...}
}

Root.childContextTypes = {
  store: PropTypes.object,
};

我有一个依赖于商店的组件（从上下文传递下来）：

class List extends Component {
  render(){
    const items = this.context.store.getState();

    return items.map((_, i) => (
      <div key={i}>{_.name}</div>
    ));
  }
}

List.contextTypes = {
  store: PropTypes.object,
};

所以我的问题是：如何将 store 对象“注入”到组件的上下文中？我必须unmock(./app-store.js)吗？此外，我怎样才能在商店中预先填充几个灯具？

谢谢！

Answer 1

我知道这不能回答您的问题，但我想向您指出有关上下文的 React.js 文档：

大多数应用程序永远不需要使用上下文。特别是如果你刚刚开始使用 React，你可能不想使用上下文。使用上下文会使您的代码更难理解，因为它会使数据流变得不那么清晰。它类似于使用全局变量通过应用程序传递状态。

和

不要使用上下文通过组件传递模型数据。通过树显式地线程化数据更容易理解。使用上下文会使您的组件更加耦合且可重用性更低，因为它们的行为会因渲染位置不同而有所不同。

如果您使用 props 将您的 store（或者甚至只是它的必需部分）传递给您的子组件，那么您的问题已经解决了，因为在您的测试中，您可以简单地注入您的 mocked 或 stubbed store。