Setup Jest and Enzyme for React

react-jest-enzyme.md

References

• https://airbnb.io/enzyme/docs/guides/jest.html
• https://jestjs.io/docs/en/tutorial-react

Dependencies

yarn add --dev jest enzyme enzyme-adapter-react-16

# to transform react code in the test environment (skip if using `create-react-app`)
yarn add --dev babel-jest @babel/preset-env @babel/preset-react 

package.json

...
"scripts": {
    "start": "parcel index.html",
    "test": "jest"
}

Generate Jest configuration file

./node_modules/jest/bin/jest.js --init

babel.config.js

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
};

jest.config.js:

...
setupFilesAfterEnv: [
    "<rootDir>/setupTests.js"
]

setupTests.js

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

App.test.js

import React from 'react';
import { shallow } from 'enzyme';

import App from './App';


describe('<App/>', () => {
    test('should render <App/>', () => {
        const wrapper = shallow(<App/>);
        expect(wrapper).toBeDefined();
    });
});