Как протестировать компонент React, который использует контекст, как в react-router 2.0 с Jest 0.8.x

Вот настройка, которую я получил для своих контекстно-зависимых компонентов (конечно, урезанная для простоты):

// dontmock.config.js contains jest.dontMock('components/Breadcrumbs')
// to avoid issue with hoisting of import operators, which causes 
// jest.dontMock() to be ignored

import dontmock from 'dontmock.config.js';
import React from "react";
import { Router, createMemoryHistory } from "react-router";
import TestUtils from "react-addons-test-utils";

import Breadcrumbs from "components/Breadcrumbs";

// Create history object to operate with in non-browser environment
const history = createMemoryHistory("/products/product/12");

// Setup routes configuration.
// JSX would also work, but this way it's more convenient to specify custom 
// route properties (excludes, localized labels, etc..).
const routes = [{
  path: "/",
  component: React.createClass({
    render() { return <div>{this.props.children}</div>; }
  }),
  childRoutes: [{
    path: "products",
    component: React.createClass({
      render() { return <div>{this.props.children}</div>; }
    }),
    childRoutes: [{
      path: "product/:id",
      component: React.createClass({
        // Render your component with contextual route props or anything else you need
        // If you need to test different combinations of properties, then setup a separate route configuration.
        render() { return <Breadcrumbs routes={this.props.routes} />; }
      }),
      childRoutes: []
    }]
  }]
}];

describe("Breadcrumbs component test suite:", () => {
  beforeEach(function() {
    // Render the entire route configuration with Breadcrumbs available on a specified route
    this.component = TestUtils.renderIntoDocument(<Router routes={routes} history={history} />);
    this.componentNode = ReactDOM.findDOMNode(this.component);
    this.breadcrumbNode = ReactDOM.findDOMNode(this.component).querySelector(".breadcrumbs");
  });

  it("should be defined", function() {
    expect(this.breadcrumbNode).toBeDefined();
  });

  /**
   * Now test whatever you need to
   */

Возникла та же проблема, неопределенный this.context.history в модульных тестах.

Стек: React 0.14, react-router 1.0, history 1.14, jasmine 2.4.

Решилось следующим образом.

Для истории реактивного маршрутизатора я использую "history/lib/createBrowserHistory", что позволяет использовать ссылки без хэша. Этот модуль является синглтоном. Это означает, что после создания его можно будет использовать во всех ваших приложениях. Поэтому я решил выбросить миксин History и использовать историю напрямую из отдельного компонента следующим образом:

// history.js

import createBrowserHistory from 'history/lib/createBrowserHistory'
export default createBrowserHistory()


// app.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, IndexRoute } from 'react-router'

import history from './history'
import Main from './Main'

const Layout = React.createClass({
  render() {
    return <div>{React.cloneElement(this.props.children)}</div>
  }
})

const routes = (
  <Route component={Layout} path='/'>
    <IndexRoute component={Main} />
  </Route>
)

ReactDOM.render(
  <Router history={history}>{routes}</Router>, 
  document.getElementById('my-app')
)


// Main.js

import React from 'react'
import history from './history'

const Main = React.createClass({
  next() {
    history.push('/next_page')
  },

  render() {
    return <button onClick={this.next}>{'Go to next page'}</button>
  }
})

export default Main

Работает как шарм и может быть легко проверен. Больше никаких примесей, никакого контекста (по крайней мере, в этом конкретном случае). Я считаю, что тот же подход можно использовать для стандартной истории браузера реагирующего маршрутизатора, но не проверял.