How to test a React component that uses context like in react-router 2.0 with Jest 0.8.x

Question

I had this problem in the past while using older versions of react-router which I solved using: stubRouterContext + a hacky way to access the component instance (using refs: https://github.com/reactjs/react-router/issues/1140#issuecomment-113174774)

I thought this would improve in the future but I am hitting the same wall with react-router 2.0 (I am not saying this is a problem with react-router but since it uses context, it affects my tests). So, I have a component that uses context to push new state into the url this.context.router.push(...) which is the way to go now https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#programmatic-navigation

I am telling jest.dontMock('react-router') but my test will fail with:

TypeError: Cannot read property 'push' of undefined

This happens because the instance returned by TestUtils.renderIntoDocument will have:

context: Object { router: undefined }

Now, what is the real problem here? Is it Jest? I'm pretty sure I am not the only one who encounters this and since stubRouterContext it's not in the official docs of react-router anymore, is there any broad accepted solution for this?

How would I make the test to work? Which is basically having the correct context and being able to access everything from the component instance returned by TestUtils.renderIntoDocument.

I am using react 0.14.7, jest-cli 0.8.2 and react-router 2.0.

Answer 1

Here's the setup that I've ended up with for my context dependent components (stripped down for simplicity, of course):

// 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
   */

Answer 2

Had same trouble, undefined this.context.history in unit tests.

Stack: React 0.14, react-router 1.0, history 1.14, jasmine 2.4

Was solved next way.

For react-router history I use "history/lib/createBrowserHistory", which allows links without hash. This module is singleton. That means once created it could be used through all your apps. So I've decided to throw away History mixin and use history directly from separate component next way:

// 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

Works like a charm and could be tested easily. No more mixins, no more context (at least in this particular case). I believe same approach could be used for standart react-router browser history, but didn't check.