Hogyan állítsuk be a Jest & Enzyme-t, mint egy főnököt

Amanecer

Amikor elkezdtem teszteket írni a React alkalmazásomhoz, kellett néhány próbálkozás, mire rájöttem, hogyan állítsam be a tesztkörnyezetemet a Jest& használatával Enzyme. Ez az oktatóanyag feltételezi, hogy már van egy React alkalmazása a webpack& paranccsal babel. Innen folytatjuk.

Ez része az általam írt cikksorozatnak. Beszélek arról, hogyan lehet a React alkalmazást a gyártáshoz megfelelő és egyszerű módon beállítani.

  • 1. rész: A Webpack 4 és a Babel 7 kombinálása fantasztikus React alkalmazás létrehozásához (Beszél a webpack babel felállításáról, az .scss támogatással együtt)
  • 2. rész Ezek az eszközök segítenek a tiszta kód megírásában (Beszél a kód automatizálásáról, tehát minden kód, amelyet írsz, jó kód)
  • Ez a 3. rész , amelyben a Jest Enzyme-mel történő beállításáról fogok beszélni.

Mielőtt nekilátnánk, ha bármikor elakadt, kérjük, bátran ellenőrizze a kódtárat . A PR-eket szívesen fogadjuk, ha úgy érzi, hogy a dolgokon javítani lehet.

Előfeltétel

Az npm (csomópont csomagkezelő) használatához telepítenie kell a Node szoftvert.

Először hozzon létre egy nevű mappát, appmajd nyissa meg a terminált, lépjen be abba a appmappába, és írja be:

npm init -y

Ez létrehoz egy package.jsonfájlt az Ön számára. A package.jsonfájljába írja be a következőket:

{ "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" } }

Másodszor hozzon létre egy mappát srca appmappában. src/app/mappában található az összes React-kód és annak tesztje. De előtte értsük meg, miért tettük, amit tettünk az package.jsonaktánkban.

Beszélek scriptsegy kicsit az ígéretről. De előtte tanuljuk meg, miért van szükségünk a következő függőségekre. Azt akarom tudni, hogy mi megy benne a package.jsonTehát kezdjük.

@babel/coreMivel általában webpack-ot használunk a reakciókód összeállításához. A Bábel egy nagy függőség, amely segít megmondani a webpacknak ​​a kód fordítását. Ez a kortárs függőség a Jest használatához is.

@babel/polyfilA Jest-hez egy úgynevezett dologra van szükség regenerator-runtime, a @ babel / polyfill beépítve van vele, és néhány más jó funkcióval.

@babel/preset-envA & @babel/preset-reactIs olyan funkciókhoz használható, mint az ES6 és a React, így az egységtesztek írásakor Jesttud az ES6 szintaxisáról és a JSX-ről.

babel-coreEz leginkább a függőség Jest, mivel szükségünk van babel-coreJest munkájára.

babel-jest Segít Bábelnek megérteni a kódot, amibe beírjuk Jest

enzyme Ez egy olyan állítási könyvtár, amely megkönnyíti a React Components kimenetének érvényesítését, kezelését és áthaladását.

enzyme-adapter-react-16 Adapter / középáru, amely segíti a Jest kapcsolatot enzyme

jest A Jest az a tesztkönyvtár, amelyen futtatjuk a tesztjeinket.

Megnézheti egy nagyon egyszerű, csupasz csont példáját a hűvös emberek . A babel segítségével egyszerű tesztet futtathat itt .

Ha szeretné beállítani a React web webcsomagját, ez egy részletes áttekintés arról, hogyan csináltam. Vagy egyszerűen átnézheti a teljes kódbázist, amely az alapvető csupasz csontstruktúrát használja arra, amire szüksége lesz a React alkalmazás beállításakor a jest / enzim mellett ( kezdőkészlet itt ).

Ezután hozzunk létre egy fájlt, amelyet jest.config.jsa fő appmappánkban hívunk , és adjuk hozzá a következő kódot. Egy kicsit beszélek arról, hogy ez mit csinál.

// 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, };

Másodszor hozzon létre egy fájlt, amelyet enzyme.config.jsa fő appmappában hív , és adja hozzá a következő kódot.

/** Used in jest.config.js */ import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; configure({ adapter: new Adapter() });

Először beszéljünk róla jest.config.js

clearMockstörli az összes gúnyt, így a nth tesztelt gúny nem mutálódik és nem befolyásolja a tesztet a n+1helyzetében.

collectCoverageFromazt mondja a jest-nek, hogy gyűjtse be a kód lefedettségét a src/mappában található összes .js fájlból . A lefedettség megmondja, hogy a kód hány százalékát fedik le a tesztesetek.

coverageDirectoryazt mondja a Jest-nek, hogy a lefedettségi könyvtárat coveragea fő app/mappában kell megnevezni .

moduleFileExtensionsbefogad egy kiterjesztés tömböt, amely megmondja Jestnek, hogy mely fájlokat tudja tesztelni. Azt mondjuk, hogy tesztelje az összes .js | .jsx | .json fájlt.

setupFiles ez nagyon fontos, mivel elmondja Jestnek az utat, ahonnan beszerezheti az enzim konfigurációit (erről később)

testEnvironmentmeghatározza, hogy a Jest milyen környezetben futtatja a tesztet, mivel egy webalkalmazást tesztelünk. A környezetet beállítottamjsdom

testMatchmegmondja Jestnek, mely fájlokat fogja tesztelni. Itt 2 konfigurációban adok át, az egyik az összes fájl tesztelése bármely megnevezett mappában, __tests__vagy az összes fájl tesztelése, amelyek végződnek spec.js|.jsxvagytest.js|.jsx

testPathIgnorePatternsNem akarom, hogy Jest teszteket futtasson a mappámban node_modules. Tehát itt nem vettem figyelembe ezeket a fájlokat.

testURLEz az opció állítja be a jsdom környezet URL-jét. Ez olyan tulajdonságokban tükröződik, mint például a location.href

transformIgnorePatternsAz összes forrásfájl-útvonalhoz illesztett regexp mintasztring tömbje, az illesztett fájlok kihagyják az átalakítást. Itt csak egyet adok nekinode_modules

verboseHa az true igaz, akkor nagyon részletes naplót kap a tesztek futtatásakor. Nem akarom ezt látni, és csak a tesztjeim lényegére koncentrálok. Tehát értékét beállítottamfalse

Beszéljünk róla enzyme.config.js

Én át az utat enzyme.config.jsaz én setupFilestréfából konfigurációkat. Amikor erre a fájlra megy, a Jest enzimkonfigurációkat vesz fel. Tehát ez azt jelenti, hogy az összes tesztet a Jesten futtatják. De az állításokat és minden mást enzim hajt végre.

Ezzel a helyünkön elkészültek a konfigurációink. Beszéljünk a szkriptekről:

"scripts": { "test": "jest", "test:watch": "jest --watch", "test:coverage": "jest --coverage --colors", },

npm run test ez lefuttatja a Jest-et és végrehajtja az összes tesztet

npm run test:watch az összes tesztet lefuttatja és figyelő üzemmódban marad, így amikor bármilyen változtatást végrehajtunk a teszteseteinken, akkor azokat újra végrehajtja.

npm run test:coveragelefedettségi jelentést készít az összes végrehajtott teszt alapján, és részletes lefedettségi jelentést ad a app/coveragemappában.

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.

Visszatérve az imént írt kódhoz, a terminál típusában npm run test. Végrehajt egy szkriptet, és megtalálja az összes végződő fájlt, *.test.jsés végrehajtja azokat. A végrehajtás után egy ilyen üzenet jelenik meg:

Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total

Most már tudom, hogy ez nem sok gyakorlati egység teszt, de azt szerettem volna, ha ez az oktatóanyag a Jest & Enzyme pusztán beállítására összpontosít.

Ismét itt van ennek az oktatóanyagnak a forráskódja .