反應路由器的最佳測試

Question

我想爲反應路由器路由模塊寫一個簡單的笑話測試。

該組件有一個按鈕，當點擊它時，通過使用'transitionTo'方法有一個程序導航到另一個路線。

我不斷收到以下錯誤，即使添加了stubRouterContext utils的後（如解釋here），並在stubRouterContext包裹我的UserDetails組件：

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

我使用的反應12.2，反應路由器12.4，和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); 

    }); 
}); 

我的存根路由器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

您需要訪問反應的上下文功能。添加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

Answer 2

我匆匆寫了一些基於維護人員編寫的代碼的修補程序。希望它有幫助！

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