Skip to content

Instantly share code, notes, and snippets.

@adjavaherian
Forked from fredrick/App-example-test.js
Last active December 13, 2017 15:33
Show Gist options
  • Save adjavaherian/a15ef0461e65d58aacd2 to your computer and use it in GitHub Desktop.
Save adjavaherian/a15ef0461e65d58aacd2 to your computer and use it in GitHub Desktop.
Here's how we have been pre-processing Jest tests for React.js components which require React-Router or Fluxxor.
/** @jsx React.DOM */
//tests/app/modules/analytics-test.js
jest.dontMock('../../../app/modules/Analytics.jsx');
jest.dontMock('../../TestContext');
var React = require('react/addons'),
MyComponent = require('../../../app/modules/Analytics.jsx'),
TestUtils = React.addons.TestUtils,
TestContext = require('../../TestContext'),
component = TestContext.getRouterComponent(MyComponent).component;
describe('Analytics', function() {
it('renders the analytics module', function() {
spyOn(component, 'addScript');
component.addScript();
expect(component.addScript).toHaveBeenCalled();
});
});
//./app/modules/Analytics.jsx
var React = require('react');
var Fluxxor = require('fluxxor');
var FluxMixin = Fluxxor.FluxMixin(React);
var paths = require('../helpers/paths');
var Analytics = React.createClass({
displayName: 'Analytics',
mixins: [FluxMixin],
getStateFromFlux: function() {
var flux = this.getFlux();
return flux.store('AnalyticsStore').getState();
},
track : function() {
this.getFlux().actions.AnalyticsActions.track(
this.getStateFromFlux().customVars
);
},
//script tags added in `render()` aren't evaluated so we need to add them to the DOM manually
addScript : function() {
var _gaq = _gaq || [];
if (window !== 'undefined') {
window._gaq = _gaq;
}
_gaq.push(['_setAccount', 'UA-XXXXXX-1']);
var ga = document.createElement('script');
ga.src = ('https:' === document.location.protocol ? 'https://ssl' :
'http://www') + '.google-analytics.com/ga.js';
ga.setAttribute('async', 'true');
document.documentElement.firstChild.appendChild(ga);
},
componentDidMount : function() {
this.addScript();
this.track();
},
render: function() {
return (null);
}
});
module.exports = Analytics;
// tests/TestContext.js
// used to bootstrap components that require flux and react-router
'use strict';
var Router = require('react-router'),
Route = Router.Route,
React = require('react/addons'),
TestUtils = React.addons.TestUtils,
TestLocation = require('react-router/modules/locations/TestLocation'),
FluxxorTestUtils = require('fluxxor-test-utils'),
FluxConstructor = require('../app/FluxConstructor.js'),
realFlux = FluxConstructor(),
fakeFlux = FluxxorTestUtils.fakeFlux(realFlux);
var TestContext = {
getRouterComponent: function(targetComponent) {
var component, mainComponent,
div = document.createElement('div'),
routes = [
React.createFactory(Route)({
name: 'test',
handler: targetComponent
})
];
TestLocation.history = ['/test'];
Router.run(routes, TestLocation, function (Handler) {
mainComponent = React.render(React.createFactory(Handler)({flux: fakeFlux}), div);
component = TestUtils.findRenderedComponentWithType(mainComponent,
targetComponent);
});
return {
component: component,
mainComponent: mainComponent
};
}
};
module.exports = TestContext;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment