Sådan opsættes Jest & Enzyme som en chef

Da jeg startede med at skrive tests til min React-applikation, tog det mig nogle forsøg, før jeg fandt ud af, hvordan jeg opsatte mit testmiljø ved hjælp af Jest
& Enzyme
. Denne tutorial antager, at du allerede har et React-program oprettet med webpack
& babel
. Vi fortsætter derfra.
Dette er en del af en række artikler, jeg har skrevet. Jeg taler om, hvordan man opretter en React-applikation til produktion på den rigtige og nemme måde.
- Del 1 Sådan kombineres Webpack 4 og Babel 7 for at skabe en fantastisk React-app (Taler om opsætning af webpack med babel sammen med .scss support)
- Del 2 Disse værktøjer hjælper dig med at skrive ren kode (Taler om automatisering af din kode, så al kode, du skriver, er god kode)
- Dette er del 3 , hvor jeg vil tale om at oprette Jest med Enzyme.
Inden vi begynder, hvis du på noget tidspunkt føler dig fast, er du velkommen til at tjekke kodelageret . PR'er er meget velkomne, hvis du føler, at tingene kan forbedres.
Forudsætning
Du skal have Node installeret for at bruge npm (node-pakkehåndtering).
Første ting først skal du oprette en mappe kaldet og app
derefter åbne din terminal og gå ind i den app
mappe og skrive:
npm init -y
Dette opretter en package.json
fil til dig. I din package.json
fil tilføjes følgende:
{ "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": { "test": "jest", "test:watch": "jest --watch", "test:coverage": "jest --coverage --colors", }, "devDependencies": { "@babel/core": "^7.0.0", "@babel/polyfill": "^7.0.0-beta.51", "@babel/preset-env": "^7.0.0-beta.51", "@babel/preset-react": "^7.0.0-beta.51", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^23.4.2", "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.1", "jest": "^23.4.2" } }
For det andet skal du oprette en mappe, der hedder src
din app
mappe. src/app/
mappen er, hvor al din React-kode sammen med dens test ligger. Men før det skal vi forstå, hvorfor vi gjorde, hvad vi gjorde i vores package.json
fil.
Jeg taler lidt om det scripts
(løfte). Men inden det, lad os lære hvorfor vi har brug for følgende afhængigheder. Jeg vil have dig til at vide, hvad der er inde i din, package.json
så lad os starte.
@babel/core
Da vi generelt bruger webpack til at kompilere vores reaktionskode. Babel er en stor afhængighed, der hjælper med at fortælle webpack, hvordan man kompilerer koden. Dette er også en afhængighed af jævnaldrende for at bruge Jest.
@babel/polyfil
Jest kræver en ting, der hedder regenerator-runtime
, @ babel / polyfill leveres indbygget med det og nogle andre seje funktioner.
@babel/preset-env
& @babel/preset-react
Er til funktioner som ES6 og React, så mens du skriver enhedstest, Jest
kender du til ES6- syntaks og JSX.
babel-core
Dette er for det meste en afhængighed for Jest
, da vi har brug babel-core
for, at Jest arbejder.
babel-jest
Hjælper Babel med at forstå den kode, vi skriver i Jest
enzyme
Dette er et påstandsbibliotek, der gør det lettere at hævde, manipulere og krydse dine React Components output.
enzyme-adapter-react-16
En adapter / mellemvare, som Jest kan få forbindelse til enzyme
jest
Jest er testbiblioteket, som vi vil køre vores test på.
Du kan se på et meget simpelt eksempel på bare bare ben af de seje folk, der er sjov. Det bruger babel til at køre en simpel test her .
Også hvis du vil konfigurere webpack til React, er dette en detaljeret gennemgang af, hvordan jeg gjorde det. Eller du kan simpelthen gå igennem hele kodebasen, som bruger den grundlæggende struktur med bare knogler, hvad du har brug for, når du konfigurerer din React-applikation sammen med jest / enzym ( start-kit her ).
Lad os derefter oprette en fil, der hedder jest.config.js
i vores app
hovedmappe og tilføje følgende kode til den. Jeg taler lidt om, hvad dette gør.
// For a detailed explanation regarding each configuration property, visit: // //jestjs.io/docs/en/configuration.html module.exports = { // Automatically clear mock calls and instances between every test clearMocks: true, // An array of glob patterns indicating a set of files for which coverage information should be collected collectCoverageFrom: ['src/**/*.{js,jsx,mjs}'], // The directory where Jest should output its coverage files coverageDirectory: 'coverage', // An array of file extensions your modules use moduleFileExtensions: ['js', 'json', 'jsx'], // The paths to modules that run some code to configure or set up the testing environment before each test setupFiles: ['/enzyme.config.js'], // The test environment that will be used for testing testEnvironment: 'jsdom', // The glob patterns Jest uses to detect test files testMatch: ['**/__tests__/**/*.js?(x)', '**/?(*.)+(spec|test).js?(x)'], // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped testPathIgnorePatterns: ['\\\\node_modules\\\\'], // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href testURL: '//localhost', // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation transformIgnorePatterns: ['/node_modules/'], // Indicates whether each individual test should be reported during the run verbose: false, };
For det andet skal du oprette en fil, der hedder enzyme.config.js
i din app
hovedmappe, og tilføje følgende kode til den.
/** Used in jest.config.js */ import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; configure({ adapter: new Adapter() });
Lad os først tale om jest.config.js
clearMocks
rydder alle mocks, så mocken i nth
testen ikke muterer eller påvirker testen i n+1
position.
collectCoverageFrom
fortæller nar at samle kodedækningen fra alle .js-filer i src/
mappen. Dækning fortæller dig, hvilken procentdel af koden der er dækket af dine testsager.
coverageDirectory
fortæller Jest, at dækningsmappen skal navngives coverage
i app/
hovedmappen.
moduleFileExtensions
tager en række udvidelser, der fortæller Jest, hvilke filer den kan teste. Vi beder det om at teste alle .js | .jsx | .json-filer.
setupFiles
dette er virkelig vigtigt, da det fortæller Jest stien, hvorfra det kan få konfigurationer for enzym (mere om dette senere)
testEnvironment
angiver, hvilket miljø Jest vil køre sin test på, da vi tester en webapplikation. Jeg har sat miljøet tiljsdom
testMatch
fortæller Jest hvilke filer den vil teste. Jeg passerer i 2 konfigurationer her, hvoraf den ene testes alle filer i en hvilken som helst mappe navngivet __tests__
eller test alle filer, der slutter med spec.js|.jsx
ellertest.js|.jsx
testPathIgnorePatterns
Jeg vil ikke have, at Jest kører tests inde i min node_modules
mappe. Så jeg har ignoreret disse filer her.
testURL
Denne mulighed indstiller URL'en til jsdom-miljøet. Det afspejles i egenskaber som location.href
transformIgnorePatterns
En række regexp-mønsterstrenge, der matches med alle kildefilstier, matchede filer springer transformation over. Her giver jeg det kun en tilnode_modules
verbose
Hvis sandt giver dig en meget detaljeret log, når du kører tests. Jeg ønsker ikke at se det og fokuserer kun på kernen i mine tests. Så jeg har indstillet dens værdi tilfalse
Lad os snakke om enzyme.config.js
Jeg passerer stien til enzyme.config.js
i mine setupFiles
i Jest-konfigurationer. Når det går til denne fil, tager Jest enzymkonfigurationer. Så det betyder, at alle testene køres på Jest. Men påstandene og alt andet vil ske med enzym.
Med dette på plads er vores konfigurationer færdige. Lad os tale om scripts:
"scripts": { "test": "jest", "test:watch": "jest --watch", "test:coverage": "jest --coverage --colors", },
npm run test
dette vil køre Jest og udføre alle testene
npm run test:watch
kører alle testene og holder uretilstand, så når vi foretager ændringer i vores testsager, vil den udføre disse testsager igen.
npm run test:coverage
genererer en dækningsrapport baseret på alle de tests, den udfører, og giver dig en detaljeret dækningsrapport i app/coverage
mappen.
Before we run a test, we need to create one. So let’s start. In your app/src/
folder create a file called WelcomeMessage.js.
import React, { Fragment } from 'react'; const styles = { heading: { color: '#fff', textAlign: 'center', marginBottom: 15, }, logo: { width: 250, heading: 250, objectFit: 'cover', }, }; const WelcomeMessage = ({ imgPath }) => { return ( Welcome To
); }; export default WelcomeMessage;
In the same folder create a file called WelcomeMessage.test.js
import React from 'react'; import { shallow } from ‘enzyme’; // Components import WelcomeMessage from './WelcomeMessage'; function setup() { const props = { imgPath: 'some/image/path/to/a/mock/image', }; const wrapper = shallow(); return { wrapper, props }; } describe('WelcomeMessage Test Suite', () => { it('Should have an image', () => { const { wrapper } = setup(); expect(wrapper.find('img').exists()).toBe(true); }); });
One thing to note here is you won’t be able to actually run the WelcomMessage.js
file since you don’t have webpack
set up with babel
. If you are looking for a way to set that up, check out my tutorial on How to combine Webpack 4 and Babel 7 to create a fantastic React app. Also if you just want the source code to this tutorial, here is the code repository. It already has Jest & Enzyme set up. Feel free to make a fork and start playing with the code base.
Kommer tilbage til den kode, vi lige har skrevet, i din terminal type npm run test
. Det udfører et script og finder alle filer, der slutter med *.test.js
og udfører dem. Når den er udført, vil du se en besked som denne:
Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total
Nu ved jeg, at dette ikke er meget af en praktisk enhedstest, men jeg ville have denne tutorial til at fokusere på rent opsætning af Jest & Enzyme.
Igen her er kildekoden til denne vejledning .