Jest тестирование реактивного маршрутизатора

Question

Я пытаюсь написать простой тест шутки для модуля Route Route.

У компонента есть кнопка, и при нажатии на нее есть программная навигация по другому маршруту с использованием метода «переход».

я получаю следующее сообщение об ошибке, даже после добавления stubRouterContext утилиты (как описано here) и обертывание моей UserDetails компонент в stubRouterContext:

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 
    }, 

    ... 

Затем вызовите transitionTo используя context.router как:

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/