Сделать реактивный маршрутизатор не нарушать тесты Jest (reactJs)

Question

В настоящее время я пытаюсь добавить тесты Jest в приложение React (найдено here).

Однако, когда я бегу следующий тест,

/** @jsx React.DOM */ 

jest.dontMock('jquery'); 
jest.dontMock('../js/components/CategoryPage.jsx'); 
describe('Category Page', function() { 
    var React = require('react/addons'); 
    var TestUtils = React.addons.TestUtils; 
    var CategoryPage = require('../js/components/CategoryPage.jsx'); 
    it('renders into the page correctly', function() { 
    // Render the CategoryPage into the document 
    var categoryPage = TestUtils.renderIntoDocument(
     <CategoryPage params={{"category": "tests"}} /> 
    ); 
    expect(categoryPage).toBeDefined(); 
    }); 
}); 

Я получаю следующее сообщение об ошибке:

● Category Page › it renders into the page correctly 
    - TypeError: Property 'makeHref' of object #<Object> is not a function 
     at Navigation.makeHref (/home/stephen/reps/node_modules/react-   router/modules/mixins/Navigation.js:29:25) 
     at React.createClass.getHref (/home/stephen/reps/node_modules/react-router/modules/components/Link.js:76:17) 
     at React.createClass.render (/home/stephen/reps/node_modules/react-router/modules/components/Link.js:97:18) 
     at ReactCompositeComponentMixin._renderValidatedComponent (/home/stephen/reps/node_modules/react/lib/ReactCompositeComponent.js:1260:34) 
     at wrapper [as _renderValidatedComponent] (/home/stephen/reps/node_modules/react/lib/ReactPerf.js:50:21) 
     at ReactCompositeComponentMixin.mountComponent  (/home/stephen/reps/node_modules/react/lib/ReactCompositeComponent.js:802:14) 
     at wrapper [as mountComponent] (/home/stephen/reps/node_modules/react/lib/ReactPerf.js:50:21) 
     at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/home/stephen/reps/node_modules/react/lib/ReactMultiChild.js:195:42) 
     at ReactDOMComponent.Mixin._createContentMarkup (/home/stephen/reps/node_modules/react/lib/ReactDOMComponent.js:260:32) 
     at ReactDOMComponent.Mixin.mountComponent (/home/stephen/reps/node_modules/react/lib/ReactDOMComponent.js:182:14) 
     at ReactDOMComponent.wrapper [as mountComponent] (/home/stephen/reps/node_modules/react/lib/ReactPerf.js:50:21) 
     at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/home/stephen/reps/node_modules/react/lib/ReactMultiChild.js:195:42) 
     at ReactDOMComponent.Mixin._createContentMarkup (/home/stephen/reps/node_modules/react/lib/ReactDOMComponent.js:260:32) 

Оба мое приложение и CategoryPage компонент специально используют реакцию-маршрутизатор. В CategoryPage есть mixin, который использует для маршрутизатора аутентификацию. Основываясь на моей собственной отладке, я обнаружил, что ошибка возникает, когда Jest пытается вызвать makeHref, один из встроенных методов интерактивного маршрутизатора для навигации.

Чтобы исправить это, я сначала попробовал позвонить jest.dontMock('react-router'), но это не имело никакого эффекта. Проблема заключается в том, что, не издеваясь над CategoryPage, шутка автоматически и необратимо включает в себя все ее зависимости, незафиксированные.

Часть проблемы, по которой эта проблема так трудно решить, заключается в том, что большинство людей, использующих Jest with React, похоже, не тестируют свои компоненты, либо потому, что они не так ориентированы на тестирование, либо потому, что они используют Flux и только тестируют магазины , Диспетчеры и т. Д. Мы еще не используем Flux, поэтому для нас это не вариант, но в будущем мы можем перейти к нему.

EDIT 1: Тест проходит, если я удаляю jest.dontMock('../js/components/CategoryPage.jsx'), но тогда невозможно проверить функциональность этого компонента.

EDIT 2: Когда я исключаю jest.dontMock('jquery') я получаю другую ошибку, связанную с Mixin я использую для создания модальности:

Category Page › it encountered a declaration exception 
- TypeError: 
/home/stephen/reps/js/components/CategoryPage.jsx: 
/home/stephen/reps/js/components/Feed.jsx:  
/home/stephen/reps/js/components/InvestmentButton.jsx: 
/home/stephen/reps/js/components/Modal.jsx: 
/home/stephen/reps/js/mixins/BootstrapModalMixin.jsx: 
/home/stephen/reps/node_modules/bootstrap/dist/js/npm.js: 
/home/stephen/reps/node_modules/bootstrap/js/alert.js: Cannot call method 'on' of undefined 

EDIT 3: Я, казалось бы, изолировал ошибка реагировать-маршрутизатор навигацию подмешать, где его звонки this.context.makeHref. Команда React устарела this.context с версии .9, поэтому я считаю, что это может быть источником проблем. Таким образом, любой рабочий ход или исправление для this.context приветствуется.

Answer 1

В конце концов я выяснил это с помощью создателя стойки-маршрутизатора после создания проблемы, найденной здесь: https://github.com/rackt/react-router/issues/465.

Я обошел это, используя Карму и Жасмин, чтобы проверить мое приложение. Затем я использовал функцию заглушки makeStubbedDescriptor, найденную здесь: https://gist.github.com/rpflorence/1f72da0cd9e507ebec29.

Answer 2

Я пошел вперед и собрал исправление, которое позволяет вам использовать Jest.

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