反应警告:失败的上下文类型:在`Component`中未指定必需的上下文`router`

Question

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

我有一个使用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;

我试着为此写一个测试,但碰到了一堵墙.除了我无法测试转换以便按预期工作的事实,我在我的Jest测试中也遇到了这个错误消息:

警告:失败的上下文类型:router未指定必需的上下文Searchbar.

有谁知道如何摆脱警告和奖金问题,我如何测试转换是否按预期工作？

我已经在这里和Github上的这个对话做了研究:https://github.com/rackt/react-router/issues/400是我发现的最接近问题的.看起来我需要单独导出路由器,但这似乎是一个很大的开销,只是运行组件测试没有警告la https://github.com/rackt/react-router/blob/master/docs/guides/ testing.md

这真的是要走的路吗？

Answer 1

在0.13版本的阵营路由器的混入Navigation和State被抛弃了.相反,它们提供的方法存在于对象上this.context.router.这些方法不再被弃用,但如果你this.context.router明确使用,则不需要mixin(但你需要contextTypes直接声明); 或者,您可以使用mixin,但不需要this.context.router直接使用.mixin方法将为您访问它.

在任何一种情况下,除非您通过React Router(via Router#run)渲染组件,否则该router对象不会提供给上下文,当然您也无法调用转换方法.这就是警告告诉你的 - 你的组件希望将路由器传递给它,但它无法找到它.

要单独测试它(不创建路由器对象或运行组件Router#run),您可以router在组件的上下文中将模拟对象放在正确的位置,并测试您transitionTo使用正确的值调用它.