How can I test React Router with Jest?

Question

I could not verify React Router with contextsuccess. I use

• respond 0.13.3
• response-router 0.13.3
• jest 0.3.0
• node 0.10.33

and tried these approaches:

• https://labs.chie.do/jest-testing-with-react-router/
• https://gist.github.com/alanrubin/da3f740308eb26b20e70

Is there a final example?

All references to the super-secret manual mentioned in this question (which does not use Jest) are now broken. When I was able to view this guide, it did not provide more information than the first link above.

Answer 1

, , , , jest , .

//router-test-helper
var Router = require('react-router'),
    Route = Router.Route,
    TestLocation = require('react-router/lib/locations/TestLocation');

module.exports = function(React){
    TestUtils = React.addons.TestUtils;
    return {
        getRouterComponent: function(targetComponent, mockProps) {
            var component,
                div = document.createElement('div'),
                routes = [
                    React.createFactory(Route)({
                        name: '/',
                        handler: targetComponent
                    })
                ];

            location = new TestLocation('/');
            Router.run(routes, location, function (Handler) {
                var mainComponent = React.render(React.createFactory(Handler)(mockProps), div);
                component = TestUtils.findRenderedComponentWithType(mainComponent, targetComponent);
            });
            return component;
        }
    };
};

, , , , . ... - .

.

//test-example
jest.dontMock('../src/js/someComponent');
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var routerHelper = require('../router-test-helper')(React);
var SomeComponent = require('../srcs/js/someComponent');

describe('Some Component', function(){
    it('should be testable', function(){
        var mockProps = {}; 
        var renderedComponent = routerHelper.getRouterComponent(SomeComponent, mockProps);
        // Test your component as usual from here.....
        ///////////////////////////////////////////////

        var inputs = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, 'input');
        //blah blah blah
    });
});

, React

... , . , - -y, , - . ... , , 1,0- . "The React Way" (tm), . , , , .

Answer 2

, . , , (, ):

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