Professional Documents
Culture Documents
Configure Adapter: 'Enzyme' 'Enzyme-Adapter-React-16'
Configure Adapter: 'Enzyme' 'Enzyme-Adapter-React-16'
Configure Adapter: 'Enzyme' 'Enzyme-Adapter-React-16'
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';
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';
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.
STATEFUL COMPONENTS
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.