Question

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

该组件有一个按钮，当点击它时，通过使用“转换”来编程导航到另一条路线。方法。

即使添加了stubRouterContext utils（如解释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

反应路由器的开玩笑测试

2 个答案: