Меню

Как да тествате React Apps, използвайки Jest Framework

how test react apps using jest framework

Опитайте Нашия Инструмент За Премахване На Проблемите

В този видео урок ще се научим да създаваме и тестваме React App, като използваме Jest, Mocking, използвайки Jest и Spying функции, използвайки командата Jest spyOn:

ДА СЕ Пълно представяне на Jest беше даден в предишния ни урок. В този урок ще видим как да използваме Jest за тестване на приложения, базирани на React.

Ще се научим да създаваме заредено приложение React, използвайки просто над морското равнище базирана команда и използвайте същото приложение за писане на тестове за реагиране на Jest. Също така ще изследваме концепцията за тестване на моментни снимки и ще се запознаем с това как можете да се подигравате и шпионирате React компоненти, като използвате Jest framework и Jest spyon command.

Тестване на React Apps & Jest се подиграва и шпионира

Какво ще научите:

React - Първи стъпки

Jest е създаден за широко тестване на приложения на React, заедно с поддръжката за всички други JavaScript рамки.

Тъй като ще използваме приложението React, за да добавим Jest рамка и тестове, е наложително и наистина предпоставка да имаме основно разбиране за приложенията React.

За да започнете с основно приложение React, моля, следвайте стъпките по-долу:

# 1) За да създадете приложение React, можете просто да използвате изпълнител на пакет от възли (т.е. npx, който също идва заедно с npm) и да изпълните командата по-долу.

npx create-react-app my-app

# две) След като горната команда завърши, отворете проекта my-app във всеки избран от вас редактор - препоръчва се Visual Studio Code, който е свободно достъпен.

# 3) В терминала / командния прозорец (вътре в редактора) стартирайте проекта, като използвате командата по-долу.

npm start

# 4) След като проектът е компилиран, той ще отвори нов раздел в браузъра с URL адреса http: // localhost: 3000

# 5) Също така, моля, обърнете внимание, че всички свързани с Jest зависимости се инсталират като част от проекта React, създаден с помощта на гореспоменатата команда npx.

# 6) Проектът включва и библиотека за тестване на React на име jest-dom, която има много полезни персонализирани съвпадения на DOM елементи за Jest. (Проверете тук за повече подробности относно концепциите на React)

Има Snapshot тестване

Тестването на моментни снимки е много полезна техника за тестване на моментни снимки на компоненти на React с помощта на библиотеката Jest.

Нека първо се опитаме да разберем какво е тестване на моментни снимки по същество означава.

Snapshot не е нищо друго освен представяне на каквото и да е във времето. Например, екранна снимка, снимка от камерата и т.н. са всички моментни снимки, които представят подробностите за каквото и да е за определен момент от време.

От гледна точка на React, Snapshot не е нищо друго освен представяне на момент от време или изход на React компонент с предоставеното състояние и поведение.

Това е обяснено с прост пример, като се използват стъпките по-долу.

# 1) За да започнете с тестването на моментни снимки, добавете пакета npm “response-test-renderer”, като използвате командата по-долу.

npm i react-test-renderer

# две) Сега, нека създадем прост компонент на React, който ще бъде нашето тествано приложение. Този компонент ще има просто състояние под формата на променливи на класа и свойства на страницата.

Компонентът ще изглежда както е показано по-долу. Нека назовем този компонент като Link (и така името на съответния реагиращ компонент ще бъде 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} ); } }

Понастоящем по този начин файловата структура ще търси проекта React.

Файлова структура за проект React

# 3) Нека добавим тест за моментна снимка за този компонент.

да се) За да започнете с теста за моментна снимка - пакетът Node на React-Test-Renderer е предпоставка. Инсталирай реакция-възел-визуализатор като използвате командата по-долу.

npm i react-test-renderer

б) Добавете нов файл за добавяне на тестове за този нов компонент. Нека го наречем Link.test.js

° С) Сега добавете тест за моментна снимка. Тук първо ще създадем моментна снимка чрез изобразяване на React компонента.

Тестът ще изглежда както е показано по-долу.

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(); });

Тук в теста създаваме JSON представяне на визуализирания компонент. Предадохме стойността за свойството „page“ като „www.softwaretestinghelp.com“

д) Когато се изпълни тестът за моментна снимка - се създава файл за моментна снимка на компонента (с разширението .snap ) и се записва в директорията на проекта, която се използва повторно по време на следващите тестови изпълнения.

В този случай ще се използва файл с моментна снимка със свойството page, предоставено по време на теста. Нека видим как се генерира файлът на моментната снимка след стартиране на теста с помощта на командата „npm test“.

е) Файл на моментна снимка се създава в директория с име „__snapshots__“ в директорията src на проекта.

безплатно приложение за изтегляне на mp3 песни за android

По-долу е дадена структурата на проекта за това.

Директория „__snapshots__“

Директорията “__snapshots__” в горната екранна снимка се създава в основната директория на проекта, когато тестът се изпълнява за първи път.

е) Нека да видим как ще изглежда файлът на моментната снимка.

Отваряне на файл - Link.test.js.snap

Моментален файл

ж) По-горе е показана моментната снимка, която се съхранява за дадения компонент.

з) Сега, например, изпълнението на горния компонент се променя. Например, нека променим името на страницата на свойството на сайт в компонента и нека опитаме да стартираме теста отново.

Ето как се променя компонентът (сменихме страницата със свойство с име на нов сайт с име).

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} ); } }

Сега нека опитаме да пуснем тестовете отново. Тъй като вече имаме моментните снимки в директорията на проекта, в този сценарий се очаква нашият тест да се провали - тъй като кодът на компонента се е променил и старата снимка ще бъде неуспешна.

По-долу е даден резултатът, който получаваме, докато изпълняваме теста:

Кодът на компонента се промени

(i) Сега, нека приемем, че тези промени са необходимите промени и изискват нашите тестове да актуализират старата снимка. В този случай изпълнете тестовете с командата за актуализация, която ще замени старата снимка и ще създаде нова въз основа на новите промени в самия компонент.

Изпълнете командата

yarn test -u

(j) С горната команда и актуализираното твърдение ще видите преминаването на теста.

По този начин, цялостното Snapshot тестване е полезна техника за тестване на целия компонент спрямо окончателния изглед и съхраняване на стария резултат като моментна снимка, която гарантира, че не се появяват проблеми с регресията в резултат на промени в кода или функции или по този начин някакво рефакторинг към съществуващия компонент.

Видео урок: Има Snapshot тестване

Подигравателно използване там

В този раздел ще видим как можем да използваме Jest макети. Подигравките могат да се използват по много начини, както е показано по-долу.

Например,

  1. Подигравка на целия React компонент
  2. Подигравка на единични или множество функции - това не е специфично за никоя рамка за разработка на Javascript. Тъй като Jest е библиотека за тестване на javascript, която не е специфична за конкретна рамка, можем дори да използваме Jest, за да се подиграем на обикновен стар Javascript файл, съдържащ функции.
  3. Подигравателни API извиквания, използвани във функции или код на Javascript - Можем да използваме Jest, за да се подиграваме на отговорите от интеграция на трети страни.

Нека обсъдим подробно всеки от тези подигравателни методи.

Подигравателни реагиращи компоненти

React App се състои от множество компоненти, зависими един от друг. За по-лесно разбиране, разгледайте React Component като клас, който има презентация и логика.

Както всяка сложна система, изградена с помощта на обектно-ориентирано програмиране, е съставена от множество класове, по подобен начин React App е колекция от компоненти.

Сега, когато тестваме компонент, бихме искали да гарантираме, че няма зависимости, които да го въздействат, т.е. ако има 2 компонента, от които зависи компонентът, който се тества, тогава ако имаме средства за подигравка на зависимите компоненти, тогава можем да тестваме единично тествания компонент по по-пълен начин.

Нека се опитаме да разберем това с помощта на фигурата по-долу:

Подигравателни реагиращи компоненти

Тук имаме Компонент1, който зависи от Компонент 2 и 3.

Докато тестваме Unit Component1, можем да заменим Component2 & Component3, използвайки Jest Mocks с техните фалшиви или подигравани аналози.

Нека да видим как можем да настроим тези подигравки. Ще използваме прости Компоненти с Html текст, поставен вътре в div. Първо ще видим кода за зависими компоненти - Компонент2 и Компонент3 .

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

Сега да видим как ще изглежда Component1, който има зависими Components. Тук можете да видите, че ние импортираме зависимите компоненти и ги използваме като прост HTML таг като & съответно.

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

Сега нека видим как можем да напишем тестове за този компонент. За да създадете тест, създайте папка „tests“ в директорията „src“. Това е само за да се гарантира, че нашата директория с проекти остава чиста и организирана.

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() }) })

В горния тестов файл можете да видите, че сме се подигравали с Components1 & 2, използвайки функцията е. макет

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

Тази настройка просто ще замени всички извиквания на Component2 с това фиктивно представяне. И така, когато изобразяваме Component1 в теста, той извиква подиграваната версия на Component2, което също твърдим, като проверяваме дали Mock div елементите съществуват в документа.

Използвахме съвпадение ‘toBeInTheDocument () тук. Това съвпадение е специфично за React, тъй като крайният изведен резултат на приложенията на React не е нищо друго освен HTML код. По този начин това съвпадение търси дадения HTML елемент да присъства в HTML документа, създаден от React.

Видео урок: Jest - Mock React Components

Подигравателни функции с помощта на Jest

Сега, нека видим как можем да използваме Jest макети, за да се подиграем на определена функция за даден JavaScript файл.

Подигравателни функции с помощта на Jest

На фигурата по-горе можете да видите, че заместваме функция 2, която е зависимостта на функция1, с вградена / подигравана версия на функция 2

Първо ще създадем тестов JavaScript файл, който ще служи като тествано приложение и ще се подиграем с някои методи там, за да илюстрираме концепцията за подигравателната функция.

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

Тук имаме 2 функции, т.е. greet () и getFullName (). Функцията greet () използва getFullName (), за да получи пълното име. Ще видим как можем да заменим функцията getFullName () с нейната фиктивна реализация, докато тестваме метода greet ().

Нека напишем прост тест, за да се подиграем с това поведение с помощта на функцията Jest mock и да видим как можем да проверим дали издигнатата функция е била извикана или не.

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') })

Тук декларирахме Jest функция за макет и зададохме възвръщаема стойност като „подигравано име“, която ще бъде върната, когато функцията бъде извикана.

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

Също така, за да потвърдим, че е бил извикан макетът, можем да използваме съвпаденията Jest, както е показано по-долу.

  • toHaveBeenCalled () - Проверява дали е бил извикан макетът.
  • toHaveBeenCalledWith (arg1, arg2) - Проверява дали макетът е бил извикан с дадените аргументи.
  • toHaveBeenCalledTimes (n) - Потвърждава броя на случаите, когато Mock би бил извикан.

Има още една характеристика на Jest, която се нарича Spy.

И така, какво са шпиони и по какво се различават от подигравките?

По-голямата част от времето, Spies позволява реалното извикване на функция, но може да се използва за валидиране на неща като какви аргументи са били използвани за извикване на метода, както и за установяване дали извикването на метода се е случило или не.

Шпионирането в Jest може да се извърши чрез Има шпионка команда. Jest spyOn приема аргументите като обект и действителната функция, която трябва да бъде шпионирана, т.е.то всъщност ще извика тестваната функция и ще действа като междинен прихващач.

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') })

И така, в горния код можете да забележите, че:

(i) Настроихме шпионин на метода ‘getFullName’, използвайки командата по-долу.

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

(ii) В твърденията ние проверяваме дали шпионинът е бил извикан с очаквани аргументи.

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

Командата Jest spyOn може също да се използва за задаване на фалшива реализация, която трябва да бъде извикана вместо действителната функция, използвайки командата по-долу.

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

В този случай реалното извикване на функция се заменя с фалшива реализация, която е настроена с шпионката.

Видео урок: Функции Jest-Mock Api

Подигравка на външни API разговори с помощта на Jest

На фигурата по-долу можете да видите, че function1 осъществява повиквания към външна крайна точка на API. Например - извикване на крайна точка на платежен партньор, която дава отговор на успех или неуспех.

Сега, когато пишем модулни тестове за тази функция, не можем да очакваме да извикаме външната крайна точка всеки път, когато тестовете се изпълняват.

Има няколко причини, поради които ще избегнете извикването на външни крайни точки в теста.

  • Това може да включва разходи.
  • Неговият отговор не може да бъде контролиран. Не винаги можете да тествате за всички очаквани кодове за отговор и грешки.
  • Може да не е винаги на разположение - ако външната крайна точка не е налична, резултатите от теста ще бъдат нестабилни.

Подигравка на външни API повиквания с помощта на Jest

Поради всички тези причини би било много полезно, ако успеем да контролираме и блокираме поведението на външната крайна точка и да създадем стабилни модулни тестове за нашата функция.

Нека да видим как можем да постигнем подигравателни API извиквания с помощта на Jest framework. Axios е NPM модул, който може да бъде изтеглен / добавен към проекта с помощта на командата по-долу.

npm install --save-dev axios

Ще използваме модул ‘axios’, за да извършваме API извиквания в нашата тестова функция, както е показано по-долу.

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

Удряме фиктивна външна крайна точка, която връща фалшиви данни и успех на регистрацията и отговор на грешка.
Сега, в нашия тестов модул, ще се подиграем на модула axios и ще върнем фалшив или подиграван отговор, когато функцията извика тази външна крайна точка.

Тестовият код ще изглежда както е показано по-долу.

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') }) })

Тук е важно да разберем, че тук се подиграваме с целия модул ‘axios’, т.е. всяко повикване, което преминава към модула Axios по време на изпълнението на теста, ще премине към подиграваното изпълнение и ще върне отговор, както е конфигуриран в теста.

Модулът се подиграва с помощта на командата по-долу.

кой е най-добрият безплатен изтеглящ музика
const axios = require('axios') jest.mock('axios');

Конфигурирахме макета с помощта на командата по-долу.

axios.get.mockResolvedValue(mockedResponse)

По този начин можем да се подиграваме на отговорите от външни крайни точки на API. Тук използвахме крайна точка „GET“, но същият подход може да се използва и за други крайни точки като POST, PUT и т.н.

Видео урок: Jest - Mock Api Крайни точки

Заключение

В този урок научихме как да създадем просто приложение React и видяхме как Jest React може да се използва за извършване на Snapshot тестове на React компоненти, както и за подигравка на React Components като цяло.

Също така проучихме как да се подигравате с помощта на Jest и Spying функции, като използвате командата Jest spyOn, която извиква реалната реализация на метода и действа като прихващач, за да твърди за неща като броя на извикванията, аргументите, с които методът е бил извикан и т.н.

PREV Урок | СЛЕДВАЩ Урок

Препоръчително четене

^