Configure Adapter: 'Enzyme' 'Enzyme-Adapter-React-16'

You might also like

Download as odt, pdf, or txt
Download as odt, pdf, or txt
You are on page 1of 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