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

adjavaherian 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

fredrick 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

kellyrmilligan 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

timtyrrell commented Jul 16, 2015

^^ wondering that, also

@timtyrrell

This comment has been minimized.

Copy link

timtyrrell 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.