mardi 14 avril 2015

Testing React Router with Link

I am having a nightmare finding a good solution for testing a React Router link. It is passing on the 'renders Categories properly' however zero links are being passed through to the test, I have tried so many different things and have still got nowhere.


Below is what i am trying to test:


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 Test



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);
});
});


Any help would be much appreciated.


Cheers Dan


1 commentaire:

  1. This works well for react-router testing https://github.com/adjavaherian/mocha-react

    RépondreSupprimer