Jest (gulp-jest) + React + React Router Testing files

gulpfile.js

/** .... **/
var $ = require("gulp-load-plugins")();

var gulp = require("gulp");

function handleError(task) {
  return function(err) {
    $.util.log($.util.colors.red(err));
    $.notify.onError(task + " failed, check the logs..")(err);
  };
}

gulp.task("test", function () {
    return gulp.src("app/scripts").pipe($.jest({
        scriptPreprocessor: "../../spec/support/preprocessor.js",
        unmockedModulePathPatterns: [
            "node_modules/react",
            "spec/support/stubRouterContext.jsx"
        ],
        testDirectoryName: "app/scripts",
        testPathIgnorePatterns: [
            "node_modules",
            "spec/support"
        ],
        moduleFileExtensions: [
            "jsx",
            "js",
            "cjsx",
            "coffee"
        ],
        testFileExtensions: [
            "spec.jsx",
            "spec.js",
            "spec.cjsx",
            "spec.coffee"
        ]
    }).on("error", handleError("Jest Error")));
});
/** ... **/

header.jsx

"use strict";

var React = require("react"),
    Router = require("react-router");

var Header = React.createClass({

  // Sample ES6 syntax
  render: function() {
    return (
      <div id="header" className="l-side-spacing">
        <ul className="nav nav-pills pull-right">
          <li className="active"><Router.Link to="app">Home</Router.Link></li>
          <li><Router.Link to="about">About</Router.Link></li>
          <li><Router.Link to="contact">Contact</Router.Link></li>
        </ul>
        <h3 className="text-muted">React Webapp</h3>
      </div>
    );
  }

});

module.exports = Header;

header.spec.jsx

/* global jest describe it expect */
"use strict";

jest.dontMock("./header.jsx");
describe("Header", function() {
  it("renders it correctly", function() {
    var React = require("react/addons");
    var Header = require("./header.jsx");

    // Stub Router context for Home component
    var Subject = require("../../../spec/support/stubRouterContext.jsx")(Header);

    var TestUtils = React.addons.TestUtils;

    // Render the header
    var header = TestUtils.renderIntoDocument(
      <Subject/>
    );

    // Verify it rendered the right test
    var list = TestUtils.findRenderedDOMComponentWithTag(
      header, "ul");
    expect(list.getDOMNode().textContent).toEqual("HomeAboutContact");
  });
});

stubRouterContext.jsx

"use strict";

/**
 * From https://github.com/rackt/react-router/blob/master/docs/guides/testing.md
 *
 *   var stubRouterContext = require('./stubRouterContext');
 *   var IndividualComponent = require('./IndividualComponent');
 *   var Subject = stubRouterContext(IndividualComponent, {someProp: 'foo'});
 *   React.render(<Subject/>, testElement);
 */

var React = require("react");

// Polyfill Object Assign
if (!Object.assign) {
  Object.defineProperty(Object, "assign", {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function(target) {
      if (target === undefined || target === null) {
        throw new TypeError("Cannot convert first argument to object");
      }

      var to = Object(target);
      for (var i = 1; i < arguments.length; i++) {
        var nextSource = arguments[i];
        if (nextSource === undefined || nextSource === null) {
          continue;
        }

        var keysArray = Object.keys(Object(nextSource));
        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
          var nextKey = keysArray[nextIndex];
          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
          if (desc !== undefined && desc.enumerable) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
      return to;
    }
  });
}

var stubRouterContext = function(Component, props, stubs) {
  return React.createClass({
    childContextTypes: {
      makePath: React.PropTypes.func,
      makeHref: React.PropTypes.func,
      transitionTo: React.PropTypes.func,
      replaceWith: React.PropTypes.func,
      goBack: React.PropTypes.func,
      getCurrentPath: React.PropTypes.func,
      getCurrentRoutes: React.PropTypes.func,
      getCurrentPathname: React.PropTypes.func,
      getCurrentParams: React.PropTypes.func,
      getCurrentQuery: React.PropTypes.func,
      isActive: React.PropTypes.func
    },

    getChildContext: function() {
      return Object.assign({
        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 <Home/>;
      return <Component {...props}/>;
    }
  });
};

module.exports = stubRouterContext;

Going to try this today, good work!

This helped me a great deal with trying to get my test up and running, thanks for the example!

this helped me get basic test going. do you know how to test that a link component that was included is rendering the right href? all my hrefs are undefined?

thanks! This helped me a lot.

Is this still working for you? I'm encountering:

Warning: Failed Context Types: Required context router was not specified in Link. Check the render method of Header.
● Header › it renders it correctly

• TypeError: Cannot call method 'makeHref' of undefined
  at Link.getHref (/home/bschen/swish-tool/node_modules/react-router/lib/components/Link.js:75:36)
  at Link.render (/home/bschen/swish-tool/node_modules/react-router/lib/components/Link.js:101:22)

Have the same...

have same bug TypeError: Cannot call method 'makeHref' of undefined at Link.getHref I'm using the last one version v1.0.0-beta3