Testing React Router Component failing to pull through link using stubRouterContext

[mrdbeck]

Hi,

I am have a nightmare with getting one of my components to pull through when testing, below is the code:

Component

var React = require('react');
var Router = require('react-router');
var {Link} = Router;

var Categories = React.createClass({

    render: function() {
        return (
            <nav className="categories">
              <ul>
                  <li><Link to="devices">Devices</Link></li>
                  <li><Link to="cases">Cases</Link></li>
                  <li><Link to="layouts">Layouts</Link></li>
                  <li><Link to="designs">Designs</Link></li>
              </ul>
            </nav>
        );
    }
});

module.exports = Categories;

test (renders into doc passes, links are failing)

var expect = require('chai').expect;

describe('Categories', function() {
    var React = require('react/addons');
    var Categories = require('/Users/daniel/workspace/CYO_App/app/src/js/components/Categories.js');
    var stubRouterContext = require('../test-utils/stubRouterContext.js');
    var categoriesWithContext = stubRouterContext(Categories);
    var TestUtils = React.addons.TestUtils;

  it('renders Categories properly', function() {
    var categories = TestUtils.renderIntoDocument(<categoriesWithContext />);
  });

  it('renders 4 links', function() {
      var catLinks = TestUtils.scryRenderedDOMComponentsWithTag(categoriesWithContext, 'a');
      expect(catLinks).to.have.length(4);
  });
});

stubRouterContext

var React = require('react');
var objectAssign = require('object-assign');

var stubRouterContext = (Component, props, stubs) => {
  function RouterStub() { }

  objectAssign(RouterStub, {
    makePath () {},
    makeHref () {},
    transitionTo () {},
    replaceWith () {},
    goBack () {},
    getCurrentPath () {},
    getCurrentRoutes () {},
    getCurrentPathname () {},
    getCurrentParams () {},
    getCurrentQuery () {},
    isActive () {},
  }, stubs)

  return React.createClass({
    childContextTypes: {
      router: React.PropTypes.func
    },

    getChildContext () {
        console.log('blah');
      return {
        router: RouterStub
      };
    },

    render () {
      return <Component {...props} />
    }
  });
};

module.exports = stubRouterContext;

Any help would be greatly appreciated.

[mrdbeck]

anyone?

[zemirco]

Same here. Tried everything I could find online but tests do not run. Looks like my rendered component is empty because I get

Error: Did not find exactly one match (found: 0) for class:Tabs

for TestUtils.findRenderedDOMComponentWithClass(instance, 'Tabs');

[ryanflorence]

1.0 API no longer requires context for links to render

[richardware]

@mrdbeck @zemirco If you are still struggling and also, like me, stuck on pre-1.0 API versions, have a read of my answer on StackOverflow - http://stackoverflow.com/a/32246097/330824.

The short version, in Dan's case, is that categoriesWithContext should be called CategoriesWithContext. The posted code should then work.