Testing React Router Using Link

Question

I have a nightmare that found a good solution for testing React Router links. It conveys the “correct categories”, however null links pass the test, I tried so many different things and still haven’t received it anywhere.

Below I am trying to check:

component

import React from 'react'; import { Link } from 'react-router'; class Categories extends React.Component { constructor(props, context){ super(props); context.router } render() { 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> ); } } Categories.contextTypes = { router: React.PropTypes.func.isRequired }; export default Categories; 

StubRouterContext

 import React from 'react'; import objectAssign from 'object-assign'; var stubRouterContext = (Component, props, stubs) => { function RouterStub() { } objectAssign(RouterStub, { makePath () {}, makeHref () {}, transitionTo () {}, replaceWith () {}, goBack () {}, getCurrentPath () {}, getCurrentRoutes () {}, getCurrentPathname () {}, getCurrentParams () {}, getCurrentQuery () {}, isActive () {}, getRouteAtDepth() {}, setRouteComponentAtDepth() {} }, stubs) return React.createClass({ childContextTypes: { router: React.PropTypes.func, routeDepth: React.PropTypes.number }, getChildContext () { console.log('blah'); return { router: RouterStub, routeDepth: 0 }; }, render () { return <Component {...props} /> } }); }; export default stubRouterContext; 

Component testing

 var expect = require('chai').expect; var React = require('react/addons'); var Categories = require('../app/src/js/components/Categories.React.js'); var stubRouterContext = require('../test-utils/stubRouterContext.js'); var TestUtils = React.addons.TestUtils; describe('Categories', function() { var categoriesWithContext = stubRouterContext(Categories); 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); }); }); 

Answer 1

I had exactly the same problem. In the latest versions of the jet router, you do not need context to render link elements, so this is not a problem. However, if you are stuck in versions prior to API 1.0, like me, the stubRouterContext approach works well.

The only reason OP and I found that our shell was empty was to use the camelCase component name.

var categoriesWithContext = stubRouterContext(Categories); becomes var categoriesWithContext = stubRouterContext(Categories); .

Moreover, var categories = TestUtils.renderIntoDocument(<categoriesWithContext />,{}); becomes var categories = TestUtils.renderIntoDocument(<categoriesWithContext />,{}); .

An explanation of this approach is here: https://gist.github.com/sebmarkbage/f1f4ba40816e7d7848ad .

Answer 2

The first thing I notice is that you are not redrawing the "Categories WithContext" in the second test.

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

Although I did not run my code myself, the next thing I notice is the way you extract the links. In the test that I have, I have to manually execute the hierarchy.

Try it.

 it('renders 4 links', function() { var categories = TestUtils.renderIntoDocument(<categoriesWithContext />, {}); var ul = TestUtils.findRenderedDOMComponentWithTag(categories, 'ul'); var lis = TestUtils.scryRenderedDOMComponentsWithTag(ul, 'li'); lis.forEach(function(li) { // this should throw if <a/> is not found var a = TestUtils.findRenderedDOMComponentWithTag(li, 'a'); // but write an explicit expectation anyway expect(a); }); });