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,
};

所以我的问题是：我如何注射＆＃34;商店对象进入我的组件的上下文？我需要unmock(./app-store.js)吗？另外，我如何用几个装置预先填充商店？

谢谢！

Answer 1

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

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

和

不要使用上下文通过组件传递模型数据。通过树明确地线程化数据更容易理解。使用上下文可以使您的组件更加耦合，减少可重用性，因为它们的行为取决于它们的呈现位置。

如果您使用道具将商店（或者甚至只是其中所需的部分）传递给您的子组件，那么您的问题已经解决，因为在您的测试中，您只需注入您的模拟或存根商店。

测试依赖于上下文存储的组件

1 个答案: