Menu

Jak otestovat reakce aplikací pomocí Jest Framework

  • Hlavní
  • Jiný
  • Jak otestovat reakce aplikací pomocí Jest Framework

how test react apps using jest framework

Vyzkoušejte Náš Nástroj Pro Odstranění Problémů

V tomto videonávodu se naučíme vytvářet a testovat aplikaci React pomocí Jest, Mocking pomocí Jest a Spying pomocí příkazu Jest spyOn:

NA Kompletní představení Jest byl uveden v našem předchozím tutoriálu. V tomto kurzu uvidíme, jak používat Jest pro testování aplikací založených na reakcích.

Naučíme se vytvořit zaváděcí aplikaci React pomocí jednoduchého nad hladinou moře založený příkaz a použít stejnou aplikaci pro psaní testů reakce Jest. Prozkoumáme také koncept testování snímků a zjistíme, jak můžete zesměšňovat a špehovat komponenty React pomocí rámce Jest a příkazu Jest spyon.

Testování React Apps & Jest se vysmívá a špehuje

Co se naučíte:

Reagovat - Začínáme

Jest byl vytvořen pro rozsáhlé testování aplikací React spolu s podporou všech ostatních frameworků JavaScriptu.

Protože budeme používat aplikaci React k přidání rámce a testů Jest, je nutné a základní předpoklad mít základní znalosti o aplikacích React.

Chcete-li začít se základní aplikací React, postupujte podle následujících kroků:

# 1) Chcete-li vytvořit aplikaci React, můžete jednoduše použít správce balíčků uzlů (tj. Npx, který také přichází spolu s npm) a provést následující příkaz.

npx create-react-app my-app

#dva) Jakmile je výše uvedený příkaz dokončen, otevřete projekt my-app v libovolném editoru podle vašeho výběru - Visual Studio Code, který je volně dostupný, je doporučený.

# 3) V okně terminálu / příkazu (uvnitř editoru) spusťte projekt pomocí níže uvedeného příkazu.

npm start

# 4) Jakmile je projekt zkompilován, otevře se nová karta prohlížeče s URL http: // localhost: 3000

# 5) Všimněte si také, že všechny závislosti související s Jest jsou nainstalovány jako součást projektu React vytvořeného pomocí výše uvedeného příkazu npx.

# 6) Projekt také zahrnuje knihovnu pro testování reakcí s názvem jest-dom, která má pro Jest spoustu užitečných přizpůsobovačů vlastních prvků DOM. (Šek tady Další informace o konceptech React)

Existuje Testování snímků

Testování snímků je velmi užitečná technika pro testování snímků komponenty React pomocí knihovny Jest.

Nejprve se pokusíme pochopit, jaké jsou momentky v podstatě znamená.

Snapshot není nic jiného než časové vyjádření čehokoli. Například, snímek obrazovky, obrázek kamery atd. jsou všechny snímky, které po určitou dobu představují podrobnosti čehokoli.

Z pohledu React není Snapshot nic jiného než časové vyjádření nebo výstup komponenty React s dodaným stavem a chováním.

To je vysvětleno na jednoduchém příkladu pomocí níže uvedených kroků.

# 1) Chcete-li začít s testováním snímků, přidejte balíček npm „react-test-renderer“ pomocí níže uvedeného příkazu.

npm i react-test-renderer

#dva) Nyní vytvořme jednoduchou komponentu React, která bude naší testovanou aplikací. Tato komponenta bude mít jednoduchý stav ve formě proměnných třídy a vlastností stránky.

Komponenta by vypadala, jak je znázorněno níže. Pojmenujme tuto komponentu jako Link (a odpovídající název souboru reagující komponenty bude Link.react.js)

import React from 'react'; export default class Link extends React.Component { constructor() { super(); this.state = { class: 'normal', welcomeMessage: 'Hi there!' }; } render() { return ( {this.props.page} {this.state.welcomeMessage} ); } }

V tuto chvíli bude takto vypadat struktura souborů pro projekt React.

Struktura souboru pro projekt React

# 3) Přidejte test snímků pro tuto komponentu.

na) Chcete-li začít s testem snímku - Nezbytným předpokladem je balíček uzlů React-Test-Renderer. Nainstalujte render-node-renderer pomocí níže uvedeného příkazu.

npm i react-test-renderer

b) Přidejte nový soubor pro přidání testů pro tuto novou komponentu. Pojďme to pojmenovat Link.test.js

C) Nyní přidejte test snímku. Zde nejprve vytvoříme snímek vykreslením komponenty React.

Test by vypadal, jak je znázorněno níže.

import React from 'react'; import Link from './Link.react' import renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create() .toJSON(); console.log(tree) expect(tree).toMatchSnapshot(); });

Tady v testu vytváříme reprezentaci JSON vykreslené komponenty. Hodnotu vlastnosti „stránka“ jsme předali jako „www.softwaretestinghelp.com“.

d) Když je spuštěn test snímku - je vytvořen soubor snímku komponenty (s příponou . snap ) a uloženy v adresáři projektu, který je znovu použit při příštích testech.

V tomto případě by byl použit soubor snímku s vlastností stránky, jak byla dodána během testu. Podívejme se, jak se soubor snímku generuje po spuštění testu pomocí příkazu „npm test“.

je) Soubor snímku se vytvoří v adresáři s názvem „__snapshots__“ v adresáři src projektu.

jednoduchý program pro sloučení v C ++

Níže je uvedena struktura projektu.

Adresář „__snapshots__“

Při prvním spuštění testu se v kořenovém adresáři projektu vytvoří adresář „__snapshots__“ na výše uvedeném snímku obrazovky.

F) Podívejme se, jak bude snímek vypadat.

Otevřít soubor - Link.test.js.snap

Soubor snímku

G) Nahoře je snímek, který se uloží pro danou komponentu.

h) Nyní se například mění implementace výše uvedené komponenty. Například, Pojďme změnit název stránky vlastností na web v komponentě a zkusme znovu spustit test.

Takto se změní komponenta (stránku s názvem vlastnosti jsme změnili na novou vlastnost s názvem web).

import React from 'react'; export default class Link extends React.Component { constructor() { super(); this.state = { class: 'normal', welcomeMessage: 'Hi there!' }; } render() { return ( {this.props.site} {this.state.welcomeMessage} ); } }

Nyní zkusme znovu spustit testy. Protože již máme snímky v adresáři projektu, očekává se, že náš test v tomto scénáři selže - protože se změnil kód komponenty a stará shoda snímků bude selhat.

Níže je uveden výsledek, který dostaneme při spuštění testu:

Kód součásti se změnil

(i) Nyní předpokládejme, že tyto změny jsou požadovanými změnami, a k aktualizaci starého snímku budeme potřebovat naše testy. V takovém případě spusťte testy pomocí příkazu update, který přepíše starý snímek a vytvoří nový na základě nových změn v samotné komponentě.

Spustit příkaz

yarn test -u

(j) S výše uvedeným příkazem a aktualizovaným tvrzením uvidíte úspěšný test.

Celkové testování snímků je tedy užitečnou technikou k otestování celé komponenty proti konečnému zobrazení a uložení starého výsledku jako snímku, který zajišťuje, že v důsledku změn kódu nebo funkcí nebo v případě jakéhokoli refaktoringu nebudou zavedeny žádné problémy s regresí. k existující součásti.

Výukový program pro video: Existuje testování snímků

Mocking using Jest

V této části uvidíme, jak můžeme používat posměšky Jest. Vysmívání lze použít mnoha způsoby, jak je uvedeno níže.

Například,

  1. Vysmívat se celé React Component
  2. Mocking single or multiple functions - This is not specific to any Javascript development framework. Protože Jest je knihovna pro testování javascriptů, která není specifická pro žádný konkrétní rámec, můžeme dokonce použít Jest k zesměšňování obyčejného starého souboru Javascript obsahujícího funkce.
  3. Mocking API calls used inside functions or Javascript code - We can use Jest to mock response from third-party integration.

Pojďme si podrobně promluvit o každé z těchto posměšných metod.

Mocking React Components

React App se skládá z více na sobě závislých komponent. Pro jednoduché pochopení zvažte React Component jako třídu - s prezentací a logikou.

Stejně jako jakýkoli složitý systém vytvořený pomocí objektově orientovaného programování je složen z více tříd, podobně je i React App kolekce komponent.

Když nyní testujeme komponentu, chtěli bychom zajistit, aby neexistovaly žádné závislosti, které by ji ovlivnily, tj. Pokud existují 2 komponenty, na kterých je testovaná komponenta závislá, pak pokud máme prostředky k zesměšňování závislých komponent, pak můžeme testovat komponentu testovaným dílem úplnějším způsobem.

Zkusme to pochopit pomocí níže uvedeného obrázku:

Mocking React Components

Zde máme komponentu 1, která je závislá na komponentě 2 a 3.

Zatímco Unit testování Component1, můžeme nahradit Component2 & Component3 pomocí Jest Mocks s jejich falešnými nebo zesměšňovanými protějšky.

Podívejme se, jak můžeme tyto falešné zprávy nastavit. Budeme používat jednoduché komponenty s textem Html umístěným uvnitř div. Nejprve uvidíme kód pro závislé komponenty - Složka2 a Složka3 .

import React, { Component} from 'react' class Component2 extends Component { render() { return( Hello Component2 ) } } export default Component2 import React, { Component} from 'react' class Component3 extends Component { render() { return( Hello Component3 ) } } export default Component3

Nyní se podívejme, jak bude vypadat komponenta 1, která má závislé komponenty. Zde vidíte, že importujeme závislé komponenty a používáme je jako jednoduchou značku HTML jako & resp.

import React, { Component} from 'react' import Component2 from './component2' import Component3 from './component3' class Component1 extends Component { render() { return( Hello Component1 ) } } export default Component1

Nyní se podívejme, jak můžeme psát testy pro tuto komponentu. Chcete-li vytvořit test, vytvořte složku „tests“ v adresáři „src“. To je jen proto, aby náš adresář projektu zůstal čistý a organizovaný.

jak otevřít torrentované soubory windows
import React, {Component} from 'react' import {render, container} from '@testing-library/react' import Component1 from '../components/component1' // arrange - mock setup jest.mock('../components/component2', () => () => Hello Mock Component2 ) jest.mock('../components/component3', () => () => Hello Mock Component3 ) describe('mock component tests', () => { test('mocked components in react', () => { // act const {container} = render() // assert console.log(container.outerHTML) const mockComponent2 = container.querySelector('div#mockComponent2') const mockComponent3 = container.querySelector('div#mockComponent3') expect(mockComponent2).toBeInTheDocument() expect(mockComponent3).toBeInTheDocument() }) })

Ve výše uvedeném testovacím souboru vidíte, že jsme se pomocí funkce posmívali Components1 & 2 is.mock

jest.mock('../components/component2', () => () => Hello Mock Component2 )

Toto nastavení jednoduše nahradí všechna vyvolání komponenty2 tímto falešným vyjádřením. Když tedy v testu vykreslíme komponentu 1, volá zesměšňovanou verzi komponenty 2, kterou jsme také prosadili kontrolou, zda v dokumentu existují prvky Mock div.

Zde jsme použili srovnávač ‘toBeInTheDocument (). Tento matcher je specifický pro React, protože konečný vykreslený výstup aplikace React není nic jiného než HTML kód. Tento vyhledávač tedy hledá, aby daný prvek HTML byl přítomen v dokumentu HTML vytvořeném Reactem.

Výukový program pro video: Žert - Mock React Components

Mocking Functions using Jest

Nyní se podívejme, jak můžeme použít falešné pokusy Jest k zesměšňování konkrétní funkce pro daný soubor JavaScriptu.

Mocking Functions using Jest

Na výše uvedeném obrázku můžete vidět, že nahrazujeme funkci 2, což je závislost funkce 1, na zamotanou / zesměšňovanou verzi funkce 2.

Nejprve vytvoříme testovací soubor JavaScriptu, který bude sloužit jako testovaná aplikace, a budeme tam zesměšňovat některé metody pro ilustraci konceptu posměšných funkcí.

function getFullName(firstname, lastname) { return firstname + ' ' + lastname } function greet(firstname, lastname) { return 'Hello! ' + this.getFullName(firstname,lastname) } module.exports = {getFullName, greet}

Máme zde 2 funkce, tj. Greet () a getFullName (). Funkce greet () používá getFullName () k získání celého jména. Uvidíme, jak můžeme nahradit funkci getFullName () její falešnou implementací při testování metody greet ().

Pojďme napsat jednoduchý test, který bude zesměšňovat toto chování pomocí falešné funkce Jest a uvidíme, jak můžeme ověřit, zda byla vysmívaná funkce volána nebo ne.

test('illustrate mocks', () => { // arrange const mock = jest.fn().mockReturnValue('mocked name') const greeter = require('../app.js') greeter.getFullName = mock // act const result = greeter.greet('aman', 'kumar') // assert expect(result).toBe('Hello! mocked name') expect(mock).toHaveBeenCalled() expect(mock).toHaveBeenCalledTimes(1) expect(mock).toHaveBeenCalledWith('aman','kumar') })

Zde jsme deklarovali falešnou funkci Jest a nastavili jsme návratovou hodnotu jako „zesměšňovaný název“, která bude vrácena při volání funkce.

const mock = jest.fn().mockReturnValue('mocked name')

Také k ověření, že falešný byl volán, můžeme použít porovnávače Jest, jak je znázorněno níže.

  • toHaveBeenCalled () - Ověří, zda byl volán falešný.
  • toHaveBeenCalledWith (arg1, arg2) - Ověří, zda byl s danými argumenty volán falešný hovor.
  • toHaveBeenCalledTimes (n) - Ověří, kolikrát by bylo voláno Mock.

Existuje ještě další vlastnost Jestu, která se jmenuje Spy.

Co jsou tedy Spies a jak se liší od falešných?

Většinu času Spies umožňuje volání skutečných funkcí, ale mohlo by být použito k ověření věcí, jako například jaké argumenty byly použity k volání metody, a také ke zjištění, zda se volání metody stalo nebo ne.

Špionáž v Jest lze provést prostřednictvím Existuje spyOn příkaz. Jest spyOn bere argumenty jako objekt a skutečnou funkci, na kterou se má špehovat, tj. Ve skutečnosti zavolá testovanou funkci a bude fungovat jako interceptor.

test('illustrate spy', () => { // arrange const greeter = require('../app.js') const getFullNameSpy = jest.spyOn(greeter, 'getFullName') // act const result = greeter.greet('aman', 'kumar') // assert expect(getFullNameSpy).toHaveBeenCalled() expect(result).toBe('Hello! aman kumar') expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar') })

Ve výše uvedeném kódu tedy můžete pozorovat, že:

(i) Pomocí níže uvedeného příkazu jsme nastavili špionážní metodu „getFullName“.

const getFullNameSpy = jest.spyOn(greeter, 'getFullName')

ii) V tvrzeních ověřujeme, že špion byl volán s očekávanými argumenty.

expect(getFullNameSpy).toHaveBeenCalled() expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar')

Příkaz Jest spyOn lze také použít k určení falešné implementace, která by měla být volána místo skutečné funkce pomocí níže uvedeného příkazu.

const getFullNameSpy = jest.spyOn(greeter, 'getFullName').mockImplementation()

V tomto případě je volání skutečné funkce nahrazeno falešnou implementací, která je nastavena pomocí špiona.

Výukový program s videem: Funkce Jest- Mock Api

Mocking External API Calls using Jest

Na níže uvedeném obrázku můžete vidět, že function1 provádí volání na externí koncový bod API. Například - volání koncového bodu platebního partnera, který dává odpověď na úspěch nebo selhání.

Nyní, když pro tuto funkci píšeme jednotkové testy, nemůžeme očekávat, že zavoláme externí koncový bod pokaždé, když jsou testy spuštěny.

Existuje několik důvodů, proč byste se v testu vyhnuli volání externích koncových bodů.

  • Může to zahrnovat náklady.
  • Jeho odezvu nelze ovládat. Nelze vždy otestovat všechny očekávané kódy odezvy a chyby.
  • Nemusí být vždy k dispozici - pokud externí koncový bod není k dispozici, budou výsledky testu šupinaté.

Mocking externích volání API pomocí Jest

Ze všech těchto důvodů by bylo velmi užitečné, kdybychom mohli kontrolovat a potlačovat chování externího koncového bodu a vytvářet robustní testy jednotek pro naši funkci.

Podívejme se, jak můžeme dosáhnout posměšných volání API pomocí rámce Jest. Axios je modul NPM, který lze stáhnout / přidat do projektu pomocí níže uvedeného příkazu.

npm install --save-dev axios

K provádění volání API v naší testovací funkci budeme používat modul „axios“, jak je uvedeno níže.

function getUserData() { axios.get('https://reqres.in/api/users/2') .then(response => console.log(response.data)) .catch(error => console.log(error)); }

Narážíme na fiktivní externí koncový bod, který vrací falešná data a zaznamenává úspěch a reakci na chybu.
Nyní v našem testu jednotky budeme zesměšňovat modul axios a vrátit falešnou nebo zesměšněnou odpověď, když funkce volá tento externí koncový bod.

Testovací kód bude vypadat níže.

const axios = require('axios') jest.mock('axios'); describe('mock api calls', () => { test('mocking external endpoint in axios', () => { // arrange const mockedResponse = {data: {username:'test-user', address:'India'}} axios.get.mockResolvedValue(mockedResponse) const app = require('../app.js') // act app.getUserData() // asserts expect(axios.get).toHaveBeenCalled() expect(axios.get).toHaveBeenCalledWith('https://reqres.in/api/users/2') }) })

Zde je důležité si uvědomit, že zde zesměšňujeme celý modul „axios“, tzn. Jakékoli volání, které během provádění testu přejde do modulu Axios, přejde k zesměšněné implementaci a vrátí odpověď, jak je nakonfigurováno v testu.

Modul je zesměšňován pomocí níže uvedeného příkazu.

const axios = require('axios') jest.mock('axios');

Faleš jsme nakonfigurovali pomocí níže uvedeného příkazu.

axios.get.mockResolvedValue(mockedResponse)

Tímto způsobem můžeme zesměšňovat odpovědi z externích koncových bodů API. Zde jsme použili koncový bod „ZÍSKAT“, ale stejný přístup lze použít i pro jiné koncové body, jako je POST, PUT atd.

Výukový program k videu: Jest - koncové body Mock Api

Závěr

V tomto tutoriálu jsme se naučili, jak vytvořit jednoduchou aplikaci React, a zjistili jsme, jak lze Jest React použít k provádění snapshotových testů na komponentách React a také k posměchu React Components jako celku.

Rovněž jsme prozkoumali mockování pomocí funkcí Jest a Spying pomocí příkazu Jest spyOn, který volá skutečnou implementaci metody a funguje jako interceptor pro prosazování věcí, jako je počet vyvolání, argumenty, kterými byla metoda volána atd.

Výukový program PREV | DALŠÍ výuka

Doporučené čtení

^