Jest
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.
Getting Started
<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:
Babel Integration
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.
React, React Native and Snapshot Testing
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 />