react-router的Jest测试

Question

我正在尝试为react-router Route模块编写一个简单的jest测试。

该组件有一个按钮，当单击该按钮时，将使用'transitionTo‘方法编程导航到另一条路线。

即使在添加了stubRouterContext工具(如here所解释的那样)并将我的UserDetails组件包装在stubRouterContext中之后，我仍然收到以下错误：

TypeError: Property 'transitionTo' of object #<Object> is not a function

我使用的是react 12.2、react-router 12.4和jest 2.2

我的虚拟组件：

var Navigation, React, Router;

React = require('react/addons');
Router = require('react-router');
Navigation = require('react-router').Navigation;

module.exports = React.createClass({

  mixins: [Navigation],

  onButtonClick: function() {
    this.transitionTo('next-page');
  },

  render: function() {
    return (<button onClick={@onButtonClick}>Go to next page</button>)
  }
});

我的测试文件：

jest.dontMock('./../utils/stub-router-context')
    .dontMock('../dummy-component');

describe('DummyComponent', function() {
  it('let you navigate to next page', function() {

    var React = require('react/addons');
    var TestUtils = React.addons.TestUtils;
    var stubRouterContext = require('./../utils/stub-router-context');
    var DummyComponent = require('../dummy-component');

    var Subject = stubRouterContext(DummyComponent);
    dummyComponent = TestUtils.renderIntoDocument(<Subject/>);

    button = TestUtils.findRenderedDOMComponentWithTag(dummyComponent, 'button');
    React.addons.TestUtils.Simulate.click(button);

  });
});

我的stub-router-context.cjsx文件：

var React = require('react/addons');
var func = React.PropTypes.func;
var _ = require('lodash');

module.exports  = function(Component, props, stubs) {
  return React.createClass({
    childContextTypes: {
      makePath: func,
      makeHref: func,
      transitionTo: func,
      replaceWith: func,
      goBack: func,
      getCurrentPath: func,
      getCurrentRoutes: func,
      getCurrentPathname: func,
      getCurrentParams: func,
      getCurrentQuery: func,
      isActive: func
    },
    getChildContext: function() {
      return _.merge({}, {
        makePath: function() {},
        makeHref: function() {},
        transitionTo: function() {},
        replaceWith: function() {},
        goBack: function() {},
        getCurrentPath: function() {},
        getCurrentRoutes: function() {},
        getCurrentPathname: function() {},
        getCurrentParams: function() {},
        getCurrentQuery: function() {},
        isActive: function() {}
      }, stubs);
    },
    render: function() {
      return React.createElement(Component, props);
    }
  });
};

Answer 1

我迅速编写了一个基于维护者编写的代码的修复程序。希望它能帮上忙！

https://labs.chie.do/jest-testing-with-react-router/

Answer 2

您需要访问React的上下文功能。将contextTypes添加到您的类...

module.exports = React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },

  ...

然后使用context.router调用transitionTo，如：

this.context.router.transitionTo('Ads', {adID: 100});

其他信息可在此处找到：

https://github.com/rackt/react-router/blob/master/docs/api/RouterContext.md

Jfyi:我现在使用的是React 13.1和React-router 13.2