Up &Running s JEST

Cíl tohoto článku

Cílem tohoto článku je poskytnout vám základy testování komponenty React s Jest, s těmito znalostmi můžete začít testovat své vlastní komponenty. Připraveni? Začněme.

Ukázková komponenta

Vytvořil jsem jednoduchou komponentu Card v Codesandbox.

Tato komponenta přijímá podpěru, která zpracovává, když je Discover klikněte na tlačítko.

Zde je Codesandbox, takže můžete sledovat:

Codesandbox má stále co dělat, pokud jde o testování, nezdařilo se mi dokonce ani při zprovoznění testu snímku, takže doporučuji naklonovat své úložiště zde a sledovat ho na místním počítači.

Instalace JEST

První věc, kterou musíme udělat, než začneme Jest používat, je nainstalovat jej. Chcete-li nainstalovat Jest, spusťte následující příkaz:
npm install -D jest react-test-renderer

Naštěstí create-react-app má toto ošetřeno, takže můžeme spustit npm test spustit naše testy :)

Vytváření našeho adresáře testů

Jest hledá testy v adresářích s názvem __tests__ , přidejte __tests__ adresáře do vašeho Card komponenta.

Další věc, kterou musíme udělat, je vytvořit testovací soubor v __tests__ adresář, budeme náš soubor nazývat card.test.js

Struktura vaší složky by nyní měla vypadat takto:

Vytvoření testu snímku

Nejprve spusťte příkaz:
npm test

Tím se Jest spustí v režimu sledování, takže kdykoli provedeme změny, naše testy se znovu spustí.

První test, který napíšeme, je test snímku.

Přidejte následující kód do card.test.js soubor:

import React from "react";
import Card from "..";
import Renderer from "react-test-renderer";

it("renders correctly", () => {
  const tree = Renderer.create(<Card />).toJSON();
  expect(tree).toMatchSnapshot();
});

Tím se vytvoří snímek JSON naší komponenty v adresáři s názvem __snapshots__ , což znamená, že kdykoli se součást změní, tento test selže. Pokračujte a změňte něco v komponentě, jako je text, a získáte následující:

Chcete-li to napravit, stačí aktualizovat snímek pouhým stisknutím u .

Testování funkce zpětného volání

Nyní budeme používat knihovnu enzyme aby nám pomohl, poskytuje nám spoustu užitečných nástrojů a ušetří nám spoustu bolesti hlavy.

Potřebujeme nainstalovat několik závislostí:
npm install enzyme enzyme-adapter-react-16 --save-dev

Nyní přidejte na začátek testovacího souboru následující:

import Adapter from 'enzyme-adapter-react-16';
import { mount, configure } from 'enzyme'
configure({adapter: new Adapter()});

Aby Enzyme fungoval, musíme vytvořit adaptér, adaptér zajistí, aby Enzyme pracoval s vaší verzí React, tj. React 16.

Nyní přidáme nový test:

it('triggers the callback function', ()=>{

})

Nyní vyplňte tělo, každý řádek jsem okomentoval, aby byl snadno pochopitelný.

// in order to test the callback function we first need to mock it
const onClickCallback = jest.fn()
// pass our mock function as the prop the Card
let card = mount(<Card handleClick={onClickCallback} />)
// find out button i.e. the button that triggers the callback and click it
const button = card.find('button').simulate('click')
// our mock function should have been called once
expect(onClickCallback).toHaveBeenCalledTimes(1)

Otestujte, zda je z funkce zpětného volání předána správná hodnota

Naše funkce zpětného volání předá zpět pevně zakódovaný řetězec discover , otestujeme, abychom se ujistili, že je to správně předáno.

Funkce je podobná jako výše, s výjimkou posledního řádku:

it('callback function is the passed the string discover', ()=>{
  // in order to test the callback function we first need to mock it
  const onClickCallback = jest.fn()
  // pass our mock function as the prop the Card
  let card = mount(<Card handleClick={onClickCallback} />)
  // find out button i.e. the button that triggers the callback and click it
  const button = card.find('button').simulate('click')
  // test to see if our function was called with the right param
  expect(onClickCallback).toHaveBeenCalledWith('discover')
})

Děkuji za přečtení.

Doufám, že jste získali nějaké znalosti, budu pokračovat v přidávání do tohoto článku, takže zvažte tento návrh 1 :)

Také jsem velkým fanouškem twitteru a mám opravdu téměř 100 sledujících, takže pokud chcete, sledujte mě tam, díky.