Amanecer
Fotografie de Quino Al / Unsplash

Când am început să scriu teste pentru aplicația mea React, mi-au trebuit câteva încercări înainte să-mi dau seama cum să-mi configurez mediul de testare folosind Jest & Enzyme. Acest tutorial presupune că aveți deja configurată o aplicație React webpack & babel. Vom continua de acolo.

Aceasta face parte dintr-o serie de articole pe care le-am scris. Vorbesc despre cum să configurați o aplicație React pentru producție într-un mod corect și ușor.

Înainte de a începe, dacă vă simțiți blocat, vă rugăm să nu ezitați să verificați depozit de coduri. PR-urile sunt binevenite dacă simțiți că lucrurile pot fi îmbunătățite.

Condiție prealabilă

Trebuie să aveți Node instalat pentru a utiliza npm (manager de pachete nod).

Mai întâi, creați un folder numit app apoi deschideți terminalul și intrați în acesta app folder și tastați:

npm init -y

Aceasta va crea un package.json fișier pentru tine. În dumneavoastră package.json fișier adăugați următoarele:

{
  "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"
  }
}
Aceasta este tot ce aveți nevoie, pentru a vă configura mediul de testare. Promisiunea: D

În al doilea rând, creați un folder numit src în dumneavoastră app pliant. src/app/ folderul este locul în care va locui tot codul React împreună cu testul său. Dar înainte de asta să înțelegem de ce am făcut ceea ce am făcut în al nostru package.json fişier.

Voi vorbi despre scripts într-un pic (promisiune). Dar înainte de asta, să aflăm de ce avem nevoie de următoarele dependențe. Vreau să știi ce se întâmplă în interiorul tău package.json Asadar, hai sa incepem.

@babel/core Deoarece, în general, folosim webpack pentru a compila codul nostru de reacție. Babel este o dependență majoră care vă ajută să spuneți webpack-ului cum să compilați codul. Aceasta este o dependență de la egal la egal pentru utilizarea Jest.

@babel/polyfil Gluma necesită un lucru numit regenerator-runtime, @ babel / polyfill vine încorporat cu acesta și cu alte caracteristici interesante.

@babel/preset-env & @babel/preset-react Este pentru caracteristici precum ES6 și React, deci în timpul scrierii testelor unitare Jest stie despre ES6 sintaxă și JSX.

babel-core Aceasta este în mare parte o dependență pentru Jest, după cum avem nevoie babel-core pentru ca Jest să funcționeze.

babel-jest Îl va ajuta pe Babel să înțeleagă codul în care scriem Jest

enzyme Aceasta este o bibliotecă de afirmații care face mai ușor să afirmați, să manipulați și să traversați ieșirea componentelor dvs. React.

enzyme-adapter-react-16 Un adaptor / middleware pentru a ajuta Jest să se conecteze enzyme

jest Jest este biblioteca de test pe care vom rula testele noastre.

Puteți arunca o privire la un exemplu foarte simplu de os gol de către oamenii buni de la glumă. Folosește babel pentru a rula un test simplu Aici.

De asemenea, dacă doriți configurare webpack pentru React, aceasta este o prezentare detaliată a modului în care am făcut-o. Sau puteți pur și simplu să parcurgeți întreaga bază de cod care utilizează structura de bază a oaselor goale a ceea ce veți avea nevoie la configurarea aplicației React împreună cu glumă / enzimăkit de pornire aici).

Apoi, să creăm un fișier numit jest.config.js în principalul nostru app folder și adăugați următorul cod la acesta. Voi vorbi despre ce face asta într-un pic.

// For a detailed explanation regarding each configuration property, visit:
// https://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: ['<rootDir>/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: 'http://localhost',

  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
  
  // Indicates whether each individual test should be reported during the run
  verbose: false,
};
Fișier de configurare Jest app / jest.config.js

În al doilea rând, creați un fișier numit enzyme.config.js în principal app folder și adăugați următorul cod la acesta.

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

configure({ adapter: new Adapter() });
Fișier de configurare enzimă app / enzyme.config.js

Să vorbim mai întâi despre jest.config.js

clearMocks va șterge toate batjocurile, astfel încât să bată jocul nth testul nu mută sau afectează testul la n+1 poziţie.

collectCoverageFrom îi spune jest să colecteze acoperirea codului din toate fișierele .js din src/ pliant. Acoperirea vă spune ce procent din cod este acoperit de cazurile dvs. de testare.

coverageDirectory spune Jest că ar trebui numit directorul de acoperire coverage în principal app/ pliant.

moduleFileExtensions preia o serie de extensii care îi spune lui Jest ce fișiere poate testa. Îi spunem să testeze toate fișierele .js | .jsx | .json.

setupFiles acest lucru este cu adevărat important, deoarece îi spune lui Jest calea de unde poate obține configurații pentru enzimă (mai multe despre aceasta mai târziu)

testEnvironment specifică în ce mediu Jest își va rula testul, deoarece testăm o aplicație web. Am stabilit mediul jsdom

testMatch îi spune lui Jest ce fișiere va testa. Trec în 2 configurații aici, una fiind testarea tuturor fișierelor din orice folder numit __tests__ sau testați toate fișierele care se termină cu spec.js|.jsx sau test.js|.jsx

testPathIgnorePatterns Nu vreau ca Jest să facă teste în interiorul meu node_modules pliant. Așa că am ignorat acele fișiere aici.

testURL Această opțiune setează adresa URL pentru mediul jsdom. Se reflectă în proprietăți precum location.href

transformIgnorePatterns O serie de șiruri de modele regexp care sunt potrivite cu toate căile de fișiere sursă, fișierele potrivite vor ignora transformarea. Aici îi dau doar unul pentru node_modules

verbose Dacă este adevărat, vă oferă un jurnal foarte detaliat atunci când executați testele. Nu vreau să văd asta și să mă concentrez doar pe esența testelor mele. Așa că i-am setat valoarea la false

Hai sa vorbim despre enzyme.config.js

Trec pe calea enzyme.config.js in al meu setupFiles în configurațiile Jest. Când merge la acest fișier, Jest preia configurații enzimatice. Deci asta înseamnă că toate testele vor fi rulate pe Jest. Dar afirmațiile și orice altceva vor fi făcute de enzimă.

Având în vedere acest lucru, configurațiile noastre sunt terminate. Să vorbim despre scripturi:

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

npm run test aceasta va rula Jest și va executa toate testele

npm run test:watch va rula toate testele și va continua modul de veghe, astfel încât, atunci când vom aduce modificări cazurilor noastre de testare, va executa din nou aceste cazuri de testare.

npm run test:coverage va genera un raport de acoperire bazat pe toate testele pe care le execută și vă va oferi un raport de acoperire detaliat în app/coverage pliant.

Înainte de a rula un test, trebuie să creăm unul. Asadar, hai sa incepem. În dumneavoastră app/src/ folder creați un fișier numit 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 (
    <Fragment>
      <h1 style={styles.heading}>
        Welcome To
      </h1>
      <img src={imgPath} alt="app logo" style={styles.logo} />
    </Fragment>
  );
};

export default WelcomeMessage;
app / src / WelcomeMessage.js

În același folder creați un fișier numit 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(<WelcomeMessage />);
  return { wrapper, props };
}

describe('WelcomeMessage Test Suite', () => {
  it('Should have an image', () => {
    const { wrapper } = setup();
    expect(wrapper.find('img').exists()).toBe(true);
  });
});
app / src / WelcomeMessage.Test.js

Un lucru de reținut aici este că nu veți putea rula efectiv WelcomMessage.js fișier deoarece nu aveți webpack înființat cu babel. Dacă sunteți în căutarea unei modalități de a configura acest lucru, consultați tutorialul meu Cum să combinați Webpack 4 și Babel 7 pentru a crea o aplicație fantastică React. De asemenea, dacă doriți doar codul sursă pentru acest tutorial, iată depozit de coduri. Are deja instalat Jest & Enzyme. Simțiți-vă liber să faceți o furculiță și să începeți să vă jucați cu baza codului.

Revenind la codul pe care tocmai l-am scris, în tipul de terminal npm run test. Acesta va executa un script și va găsi toate fișierele care se termină cu *.test.js și execută-le. După ce s-a executat, veți vedea un mesaj ca acesta:

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

Acum știu că nu este un test practic practic, dar am vrut ca acest tutorial să se concentreze doar pe configurarea Jest & Enzyme.

Din nou, aici este codul sursă pentru aceasta tutorial.