Skip to content

Instantly share code, notes, and snippets.

@atomicpages
Last active June 11, 2018 06:03
Show Gist options
  • Save atomicpages/20b073a4a6d3a5a74325d0f3e170c566 to your computer and use it in GitHub Desktop.
Save atomicpages/20b073a4a6d3a5a74325d0f3e170c566 to your computer and use it in GitHub Desktop.
React + Jest + Enzyme with non-webpack app
{
"plugins": [
"transform-class-properties",
"transform-react-jsx"
],
"presets": [
"stage-2",
["env", {
"targets": {
"browsers": [
"last 2 versions",
"not last 2 ie versions",
"last 1 ie versions"
]
}
}]
]
}
const Enzyme = require("enzyme");
const EnzymeAdapter = require("enzyme-adapter-react-16");
// Setup enzyme's react adapter
Enzyme.configure({ adapter: new EnzymeAdapter() });
{
"name": "jest",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"react": "^16.4.0",
"react-dom": "^16.4.0"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"jest": "^23.1.0"
},
"jest": {
"verbose": true,
"collectCoverage": true,
"setupTestFrameworkScriptFile": "<rootDir>/.setup.js",
"moduleDirectories": [
"node_modules"
],
"coverageReporters": [
"text",
"html",
"lcov"
]
}
}
(function (factory) {
if (typeof module === 'object' && module.exports) {
module.exports = function (root, jQuery) {
if (jQuery === undefined) {
if ( typeof window !== 'undefined' ) {
jQuery = require('jquery');
} else {
jQuery = require('jquery')(root);
}
}
factory(jQuery);
return jQuery;
};
} else {
factory(jQuery);
}
}(function ($) {
window.app = { Sample: {} };
window.app.Sample = class Demo extends React.Component {
state = { count: 0 };
constructor(props) {
super(props);
}
incrementCounter() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<a onClick={this.incrementCounter.bind(this)}>Click </a>
<span>{this.state.count}</span>
</div>
);
}
};
}));
const React = require('react');
const { shallow } = require('enzyme');
const Sample = require('./Sample');
beforeAll(function () {
window.React = React;
});
describe('Demo test', function () {
it('Module is properly exported and can be consumed by Jest', function () {
expect(Sample).toBeDefined();
});
it('Should render', function () {
const sample = shallow(<Sample />);
expect(sample.find('span')).toHaveLength(1);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment