1

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

该组件有一个按钮，当单击它时，通过使用“transitionTo”方法可以编程导航到另一条路线。

即使在添加了 stubRouterContext 实用程序（如此处所述）并将我的 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);
    }
  });
};
4

2 回答 2

2

我根据维护人员编写的一些代码快速编写了一个修复程序。希望它有帮助！

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

于 2015-05-25T18:29:18.570 回答
1

您需要访问 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

于 2015-04-09T17:29:37.293 回答