Painless JavaScript Testing
-
Adaptable: Jest uses Jasmine assertions by default and Jest is modular, extendible and configurable.
-
Sandboxed and Fast: Jest virtualizes JavaScript environments, provides browser mocks and runs tests in parallel across workers.
-
Snapshot Testing: Jest can capture snapshots of React trees or other serializable values to write tests quickly and it provides a seamless update experience.
<generated_getting_started_start /> Before you install Jest, you can try out a real version of Jest through repl.it. Just edit your test and hit the run button!
<iframe class="jest-repl" src="https://repl.it/languages/jest?lite=true"></iframe>Install Jest with yarn or npm by running yarn add -D jest or npm install --save-dev jest. Let's get started by writing a test for a hypothetical sum.js file:
module.exports = (a, b) => a + b;Create a directory __tests__/ with a file sum-test.js or name it sum.test.js or sum.spec.js and put it anywhere in your project:
test('adds 1 + 2 to equal 3', () => {
const sum = require('../sum');
expect(sum(1, 2)).toBe(3);
});Add the following to your package.json:
"scripts": {
"test": "jest"
}Run yarn test and Jest will print this message: PASS __tests__/sum-test.js. You just successfully wrote your first test using Jest!
You are ready to use Jest! Here are some more resources to help you get started:
- Read the API Documentation to learn about all available assertions, ways of writing tests and Jest specific APIs.
- Jest Configuration.
- Example Code.
- Migration from other test runners.
- Introductory guide at Plotly Academy that walks you through testing a React and Redux application.
- The React, Relay and react-native repositories have excellent examples of tests written by Facebook engineers.
...or watch a video to get started with Jest:
If you'd like to use Babel, it can easily be enabled: yarn add -D babel-jest babel-polyfill.
Don't forget to add a .babelrc file in your project's root folder. For example, if you are using ES2015 and React.js with the babel-preset-es2015 and babel-preset-react presets:
{
"presets": ["es2015", "react"]
}You are now set up to use all ES2015 features and React specific syntax.
Note: If you are using a more complicated Babel configuration, using Babel's env option,
keep in mind that Jest will automatically define NODE_ENV as test.
It will not use development section like Babel does by default when no NODE_ENV is set.
Check out the React tutorial and the React Native tutorial to get started with React or React Native codebases. You can use React's test renderer (yarn add -D react-test-renderer) to capture snapshots with Jest's snapshot feature and the toMatchSnapshot matcher:
import renderer from 'react-test-renderer';
test('Link renders correctly', () => {
const tree = renderer.create(
<Link page="http://www.facebook.com">Facebook</Link>
).toJSON();
expect(tree).toMatchSnapshot();
});and it will produce a snapshot like this:
exports[`Link renders correctly 1`] = `
<a
className="normal"
href="http://www.facebook.com"
onMouseEnter={[Function]}
onMouseLeave={[Function]}>
Facebook
</a>
`;On subsequent test runs, Jest will compare the stored snapshot with the rendered output and highlight differences. If there are differences, Jest will ask you to fix your mistake and can be re-run with -u or --updateSnapshot to update an outdated snapshot.
<generated_getting_started_end />