Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Router Test Context Helper
var React = require('react/addons'),
TestUtils = React.addons.TestUtils,
TestContext = require('./TestContext'),
App = require('./App.jsx'),
app = TestContext.getRouterComponent(App);
describe('App', function() {
it('has something', function() {
expect(app.getDOMNode().textContent).toContain('something');
});
it('has nav', function() {
var nav = TestUtils.findRenderedDOMComponentWithTag(app, 'nav');
expect(nav).toBeDefined();
});
});
'use strict';
var React = require('react/addons');
var Router = require('react-router');
var Route = Router.Route;
var TestUtils = React.addons.TestUtils;
var TestLocation = require('react-router/lib/locations/TestLocation');
var TestContext = {
getRouterComponent: function(TargetComponent) {
var component,
div = document.createElement('div'),
routes = (
<Route path="/">
<Route name="test" handler={TargetComponent} />
</Route>
);
var location = new TestLocation(['/test']);
Router.run(routes, location, function (Handler) {
var mainComponent = React.render(<Handler />, div);
component = TestUtils.findRenderedComponentWithType(mainComponent,
TargetComponent);
});
return component;
},
stubRouterContext: function(Component, routerContext) {
var RouterStub = function() {};
RouterStub.makePath = function() {};
RouterStub.makeHref = function() {};
RouterStub.transitionTo = function() {};
RouterStub.replaceWith = function() {};
RouterStub.goBack = function() {};
RouterStub.getCurrentPath = function() {};
RouterStub.getCurrentRoutes = function() {};
RouterStub.getCurrentPathname = function() {};
RouterStub.getCurrentParams = function() {};
RouterStub.getCurrentQuery = function() {};
RouterStub.isActive = function() {};
RouterStub.getRouteAtDepth = function() {};
RouterStub.setRouteComponentAtDepth = function() {};
if (routerContext) {
RouterStub = routerContext(RouterStub);
}
return React.createClass({
childContextTypes: {
router: React.PropTypes.func,
routeDepth: React.PropTypes.number
},
getChildContext: function() {
return {
router: RouterStub,
routeDepth: 0
};
},
render: function() {
return <Component />;
}
});
}
};
module.exports = TestContext;
@adjavaherian

This comment has been minimized.

Copy link

commented Feb 27, 2015

+1 This solution works, but don't forget to jest.dontMock('./TestContext')

@fredrick

This comment has been minimized.

Copy link
Owner Author

commented Jul 13, 2015

I have updated this gist to handle changes in the react-router API.

@kellyrmilligan

This comment has been minimized.

Copy link

commented Jul 14, 2015

where is stub router context used again? if you want to test components inside of the app and not the handler?

@timtyrrell

This comment has been minimized.

Copy link

commented Jul 16, 2015

^^ wondering that, also

@timtyrrell

This comment has been minimized.

Copy link

commented Jul 16, 2015

Ok, I think I get this now, but TestLocation isn't a 1.0.0beta3 thing, what do I do?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.