Snapshot Testovi u React-u Korišćenjem Jest-a

Pisanje testova možda vam nije bilo najprijatnije u prošlosti, ali sigurno se nadamo da ćete nakon čitanja ovog članka moći da povećate pokrivenost testovima.

Danas govorimo o testovima snimka pomoću Jest-a . Lako ih je napisati, brzi su i što je najvažnije, sigurno ćemo znati ako nešto nije u redu ako ih pravilno koristimo. Ovi snimci upozoriće nas na svaku promenu koju napravimo koja utiče na prikazivanje: da li radimo nešto jednostavno ili naprednije prikazivanje koje uključuje uslove ili petlje .

Konfigurišite Jest

Prvo, morate da podesite jest u projektu. Za instalaciju nekoliko paketa:

npm install --save-dev jest babel-jest babel-core regenerator-runtime babel-preset-es2015 babel-preset-react

Ne morate da instalirate regenerator-runtime ako koristite npm 3 ili 4 ili Yarn.
Dalje ćete morati dodati .babelrc datoteku u root projekta:

{
  "presets": ["env", "es2015", "react"]
}

Takođe, morate instalirati paket response-test-renderer. Ovaj paket se koristi za prikazivanje reakcionih komponenti na čiste javascript objekte.

npm i react-test-renderer --save

Ako vam je potrebna neka specifična konfiguracija za testove, možete da konfigurišete jest koristeći datoteku package.json .

Sada ste spremni da napišete svoj prvi snimak testa!

Pisanje snapshot testova

Kada pišete testove snimka pomoću jest-a, u osnovi treba da sledite sledeći obrazac:

import renderer from 'react-test-renderer';
import Component from '../Component.react';

it('renders correctly', () => {
  const tree = renderer.create(
    <Component 
        prop={propValue}
    />
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

Koristite react-test-renderer za kreiranje komponente sa željenim rekvizitima , transformišete je u JSON i zatim proverite da li se podudara sa snimkom. Lako, zar ne?

Evo konkretnijeg primera - recimo da se zove lažna komponenta Input za koju želimo da napišemo snapshot test:

function Input({ id, placeholder, label, onChange, value }) {
    return (
        <div>
            <label htmlFor={id} >
                { label }
            </label>
            <input
                id={id}
                placeholder={placeholder}
                onChange={onChange}
                value={value}
            />
        </div>
    )
}

Za našu komponentu Input može izgledati otprilike ovako:

import renderer from 'react-test-renderer';
import Input from '../Input.react';

it('renders correctly', () => {
  const tree = renderer.create(
    <Input 
        id={'id'}
        label={'label'}
        placeholder={'Placeholder'}
        onChange={() => {}}
        value={''}
    />
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

Pokretanje testova

Da biste pokrenuli test, potrebno je samo da otkucate jest komandu u terminalu. Kreiraće se datoteka izlaznog snimka, a prilikom sledećeg pokretanja testa, jest će uporediti izlaznu datoteku snimka sa našom ažuriranom komponentom.

Ako napravite neke promene na komponenti koja utiče na njeno prikazivanje (na primer, dodajte novu stavku na listu koja će se mapirati ), test neće uspeti jer će se novi objekat razlikovati od prethodnog. Ako su bile predviđene promene, možete ažurirati snimak pomoću komande jest --updateSnapshot.

Imajte na umu da bi sve ove izlazne datoteke snimaka trebalo da budu uređene zajedno sa modulima koje pokrivaju i njihovim testovima, jer su deo testa.

Naravno, iako naši snimci snimaka pokrivaju stvari poput toga da li uslovno prikazivanje radi ispravno, oni ne testiraju da li će klik na tu vezu pravilno preusmeriti na drugu stranicu. I dalje ćete morati da napišete testove koji proveravaju da li funkcionalnost radi onako kako se očekivalo, ali to ćemo obraditi u nekom od budućih članaka.

Hvala vam na vremenu izdvojenom za čitanje!

Da li vam se svideo ovaj članak? Redovno objavljujemo novi React sadržaj, pa se potrudite da se pretplatite kako ne biste ništa propustili!