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 appderefter åbne din terminal og gå ind i den appmappe og skrive:

npm init -y

Dette opretter en package.jsonfil til dig. I din package.jsonfil 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 srcdin appmappe. 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.jsonfil.

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.jsonså lad os starte.

@babel/coreDa 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/polyfilJest kræver en ting, der hedder regenerator-runtime, @ babel / polyfill leveres indbygget med det og nogle andre seje funktioner.

@babel/preset-env& @babel/preset-reactEr til funktioner som ES6 og React, så mens du skriver enhedstest, Jestkender du til ES6- syntaks og JSX.

babel-coreDette er for det meste en afhængighed for Jest, da vi har brug babel-corefor, 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.jsi vores apphovedmappe 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.jsi din apphovedmappe, 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

clearMocksrydder alle mocks, så mocken i nth testen ikke muterer eller påvirker testen i n+1position.

collectCoverageFromfortæ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.

coverageDirectoryfortæller Jest, at dækningsmappen skal navngives coveragei app/hovedmappen.

moduleFileExtensionstager 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)

testEnvironmentangiver, hvilket miljø Jest vil køre sin test på, da vi tester en webapplikation. Jeg har sat miljøet tiljsdom

testMatchfortæ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|.jsxellertest.js|.jsx

testPathIgnorePatternsJeg vil ikke have, at Jest kører tests inde i min node_modulesmappe. Så jeg har ignoreret disse filer her.

testURLDenne mulighed indstiller URL'en til jsdom-miljøet. Det afspejles i egenskaber som location.href

transformIgnorePatternsEn række regexp-mønsterstrenge, der matches med alle kildefilstier, matchede filer springer transformation over. Her giver jeg det kun en tilnode_modules

verboseHvis 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.jsi mine setupFilesi 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:coveragegenererer en dækningsrapport baseret på alle de tests, den udfører, og giver dig en detaljeret dækningsrapport i app/coveragemappen.

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.jsog 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 .