Scribd
Upload
108 views2 pages

Jest Setup for React Testing with Enzyme

This document provides instructions for setting up Jest for testing React components. It outlines installing Jest and Enzyme libraries, configuring Jest in package.json, and creating a setupTest.js file. It describes creating component test files, using Enzyme's shallow renderer to test components, and using Jest snapshots to automatically check for changes. It also discusses testing stateful components with Redux and separating container and presentational components for easier testing.

Uploaded by

LelanaVilla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
108 views2 pages

Jest Setup for React Testing with Enzyme

This document provides instructions for setting up Jest for testing React components. It outlines installing Jest and Enzyme libraries, configuring Jest in package.json, and creating a setupTest.js file. It describes creating component test files, using Enzyme's shallow renderer to test components, and using Jest snapshots to automatically check for changes. It also discusses testing stateful components with Redux and separating container and presentational components for easier testing.

Uploaded by

LelanaVilla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Setting up jest

npm init -y
npm install –save-dev jest
configure package.json to include under scripts -
test:'jest --watch *js'

REACT TESTING
npm install enzyme enzyme-adapter-react-16 jest-cli
in the SRC folder ---
create a setupTest.js inside add:
import {configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

create a test include a seperate (componentName).test.js file for what component your
testing and put in same folder
ex:
import {shallow} from 'enzyme';
import React from 'react';
import Card from './Card';

it('expect to render Card component', ()=>{


expect(shallow(<Card/>)).toMatchSnapshot()
})

youll mostly use shallow property from enzyme but there are two other options render,
and mount-
mount youll rarely use as it completes a full DOM mount
render completes a full render of a static copy of your component

snapshots come standard in jest and when you initialize a snapshot youll see a
__snapshots__ folder appear in the src folder;

snapshots automatically check previous snapshots and compare your compoents against
the original snapshot- if it matches your test will pass

if you do need to make a change after your have created a snapshot simply press the
“u” option and you now have updated your snapshot of the component.

To run tests simply enter npm test


to check the code coverage of a test and get a report enter npm test -- --coverage
*make sure you push your __snapshots__ folder to github

STATEFUL COMPONENTS

there is an npm package called redux-mock-store to mock a redux store


you can render a mockStore right after an “it “ statement.

Always try and think if breaking your container down into smaller pieces will make the
code easier to test and read.
Ask your self does the jsx rendering a requirement in the container component where
redux lives? If its not break the two up leaving the store and actions in the stateful
container and move the jsx to a stateless component, if possible.

You might also like