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.