Last active
April 6, 2018 12:39
-
-
Save fredrick/76e17f07409be07ffdcb to your computer and use it in GitHub Desktop.
React Router Test Context Helper
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'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; |
I have updated this gist to handle changes in the react-router API.
where is stub router context used again? if you want to test components inside of the app and not the handler?
^^ wondering that, also
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
+1 This solution works, but don't forget to
jest.dontMock('./TestContext')