reactjs - react 警告 : Failed Context Types: Required context `router` was not specified in `Component`

Question

我正在尝试测试一个需要将react-router与app.js分开的React组件。

我有一个使用 mixin Router.Navigation 进行重定向的组件，如下所示:

var React = require('react'),
    Router = require('react-router');

var Searchbar = React.createClass({

  mixins : [Router.Navigation],

  searchTerm: function(e) {
    if (e.keyCode !== 13) {
      return;
    }

    this.context.router.transitionTo('/someRoute/search?term=' + e.currentTarget.value)
  },

  render: function() {
    return (
      <div className="searchbar-container">
        <input type="search" placeholder="Search..." onKeyDown={this.searchTerm} />
      </div>
    )
  }
});

module.exports = Searchbar;

我尝试为此编写一个测试，但遇到了困难。除了我无法测试 transitionTo 是否按预期工作这一事实之外，我还在 Jest 测试中遇到了此错误消息:

警告:上下文类型失败:搜索栏中未指定所需的上下文路由器。

有谁知道我如何摆脱警告和奖励问题，如何测试转换是否按预期进行？

我对此以及 Github 上的对话进行了研究:https://github.com/rackt/react-router/issues/400是我发现的最接近问题的。看起来我需要单独导出路由器，但这似乎需要很大的开销，只运行组件测试而不发出警告 https://github.com/rackt/react-router/blob/master/docs/guides/testing.md

真的是这样吗？

Answer 1

在 React Router 0.13 版本中，mixin Navigation 和 State 已被弃用。相反，它们提供的方法存在于对象 this.context.router 上。这些方法不再被弃用，但如果您明确使用 this.context.router ，则不需要 mixin (但您需要直接声明 contextTypes ) ;或者，您可以使用 mixin，但不需要直接使用 this.context.router 。 mixin 方法将为您访问它。

无论哪种情况，除非您通过 React Router 渲染组件(通过 Router#run)，router 对象都不会提供给上下文，当然您无法调用转换方法。这就是警告告诉您的内容 - 您的组件希望将路由器传递给它，但它找不到它。

要单独测试此功能(无需创建路由器对象或通过 Router#run 运行组件)，您可以将模拟的 Router 对象放置在组件的上下文中正确的位置，并测试您是否使用正确的值对其调用 transitionTo。