how test react apps using jest framework
У овом видео упутству научићемо да креирамо и тестирамо Реацт апликацију помоћу Јест, Моцкинг користећи Јест и Спиинг функције помоћу Јест спиОн команде:
ДО Комплетан увод Јест је дато у нашем претходном водичу. У овом упутству ћемо видети како користити Јест за тестирање апликација заснованих на Реацт-у.
Научићемо да креирамо боотстраппед Реацт апликацију помоћу једноставног надморске висине засновану на команди и користите исту апликацију за писање тестова Јест-реакције. Такође ћемо истражити концепт тестирања брзих снимака и упознати како се можете ругати и шпијунирати Реацт компоненте користећи Јест фрамеворк и Јест спион команду.
Шта ћете научити:
Реагујте - започињање
Јест је направљен за опсежно тестирање Реацт апликација, заједно са подршком за све друге ЈаваСцрипт оквире.
Како ћемо користити апликацију Реацт за додавање Јест оквира и тестова, неопходно је и заиста је предуслов да се основно разумевање Реацт апликација.
Да бисте започели са основном апликацијом Реацт, следите кораке у наставку:
# 1) Да бисте креирали апликацију Реацт, можете једноставно да користите извршиоца пакета чворова (тј. Нпк који такође долази заједно са нпм) и извршите наредбу у наставку.
npx create-react-app my-app
#два) Када се горенаведена команда доврши, отворите пројекат ми-апп у било ком уређивачу по вашем избору - препоручује се Висуал Студио Цоде који је слободно доступан.
# 3) У прозору терминала / наредбе (унутар уређивача) покрените пројекат користећи наредбу испод.
npm start
# 4) Једном када се пројекат компајлира, отвориће се нова картица прегледача са УРЛ-ом хттп: // лоцалхост: 3000
# 5) Такође, имајте на уму да се све зависности повезане са Јестом инсталирају као део Реацт пројекта креираног помоћу горе поменуте нпк команде.
# 6) Пројекат такође укључује Реацт библиотеку за тестирање под називом јест-дом која има пуно корисних прилагођених подударања ДОМ елемената за Јест. (Проверавати овде за више детаља о Реацт концептима)
Постоји Снапсхот тестирање
Снапсхот тестирање је врло корисна техника за тестирање Реацт снимака компонената помоћу Јест библиотеке.
Покушајмо прво да схватимо шта је то снимање снимака у суштини значи.
Снапсхот није ништа друго до представљање било чега у временској тачки. На пример, снимак екрана, слика са камере итд., све су то снимци који представљају детаље било чега у одређеном временском периоду.
Из перспективе Реацт-а, Снапсхот није ништа друго до представљање тачке времена или излаз Реацт компоненте са испорученим стањем и понашањем.
Ово је објашњено једноставним примером користећи кораке у наставку.
# 1) Да бисте започели са тестирањем снимка, додајте нпм пакет „реакција-тест-рендерер“ помоћу наредбе у наставку.
npm i react-test-renderer
#два) Сада, креирајмо једноставну Реацт компоненту која ће бити наша апликација на тесту. Ова компонента ће имати једноставно стање у облику променљивих класе и својстава странице.
Компонента би изгледала као што је приказано доле. Назовимо ову компоненту као Линк (и тако ће одговарајуће име датотеке реактивне компоненте бити Линк.реацт.јс)
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} ); } }
У овом тренутку, овако ће структура датотека тражити пројекат Реацт.
# 3) Додајмо тест снимка за ову компоненту.
до) Да бисте започели са тестом брзе снимке - Пакет чворова респонсе-тест-рендерер је предуслов. Инсталирај реаговати-чвор-рендер користећи наредбу испод.
npm i react-test-renderer
б) Додајте нову датотеку за додавање тестова за ову нову компоненту. Назовимо то као Линк.тест.јс
ц) Сада додајте тест снимка. Овде ћемо прво створити снимак приказивањем компоненте Реацт.
Тест би изгледао као што је приказано доле.
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(); });
Овде у тесту креирамо ЈСОН представу приказане компоненте. Вредност својства „паге“ проследили смо као „ввв.софтваретестингхелп.цом“
д) Када се покрене тест снимка - креира се датотека снимка компоненте (са наставком .снап ) и сачуван у директоријуму пројекта који се поново користи током следећих извршавања теста.
У овом случају користиће се датотека снимка са својством странице онако како је дато током теста. Погледајмо како се датотека снимка генерише након покретања теста помоћу команде „нпм тест“.
је) Датотека снимка се креира у директоријуму названом „__снапсхотс__“ у директоријуму срц пројекта.
који је најбољи анти спиваре
Доље је дата структура пројекта за ово.
Директоријум „__снапсхотс__“ на горњој снимци екрана креира се у основном директоријуму пројекта када се тест изврши први пут.
ф) Погледајмо како ће изгледати датотека снимка.
Отвори датотеку - Линк.тест.јс.снап
г) Изнад је приказан снимак који се чува за дату компоненту.
х) Сада се, на пример, мења примена горе наведене компоненте. На пример, променимо име странице својства у локацију у компоненти и покушајмо поново да покренемо тест.
Тако се мења компонента (променили смо својство са именом странице у ново својство под називом сите).
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} ); } }
Покушајмо поново да покренемо тестове. Како снимке већ имамо у директоријуму пројекта, очекује се да тест неће успети у овом сценарију - јер се променио код компоненте и стари подударни снимак неће бити успешан.
Доље је дат резултат који смо добили током извођења теста:
(и) Претпоставимо сада да су ове промене потребне промене и да ће наши тестови требати да ажурирају стари снимак. У том случају покрените тестове помоћу наредбе упдате која би преписала стару снимку и креирала нову на основу нових промена у самој компоненти.
Рун Цомманд
yarn test -u
(ј) Уз горњу команду и ажурирану тврдњу видећете како тест пролази.
Стога је целокупно тестирање снимка корисна техника за тестирање целокупне компоненте у односу на коначни приказ и чување старог резултата као снимка који осигурава да се не појаве проблеми са регресијом као резултат промена кода или карактеристика, или по том питању било ког рефакторирања на постојећу компоненту.
Видео лекције: Постоји Снапсхот тестирање
Исмевање користећи Јест
У овом одељку ћемо видети како можемо да користимо Јест подсмехе. Наруга се може користити на бројне начине, као што је приказано у наставку.
На пример,
- Ругање целој компоненти Реацт
- Исмевање једне или више функција - Ово није специфично за било који Јавасцрипт развојни оквир. Како је Јест библиотека за тестирање јавасцрипта која није специфична за било који одређени оквир, чак можемо користити Јест да бисмо се ругали обичној старој Јавасцрипт датотеци која садржи функције.
- Исмевање АПИ позива који се користе унутар функција или Јавасцрипт кода - Можемо да користимо Јест да бисмо се подсмевали одговорима независних интеграција.
Размотримо детаљно сваку од ових ругалних метода.
Подругљиве реактивне компоненте
Апликација Реацт састоји се од више компоненти које зависе једна од друге. Ради једноставног разумевања, узмите у обзир Реацт Цомпонент као класу која има презентацију и логику.
Као и сваки сложени систем изграђен коришћењем објектно оријентисаног програмирања састоји се од више класа, слично томе, Реацт Апп је колекција компонената.
Сада, када тестирамо компоненту, желели бисмо да се уверимо да не постоје зависности које утичу на њено тестирање, тј. Ако постоје 2 компоненте, о којима компонента која се тестира зависи, онда ако имамо начина да се ругамо зависним компонентама, тада можемо цјеловитије тестирати компоненту која се испитује.
Покушајмо ово да разумемо уз помоћ доње слике:
Овде имамо компоненту1, која зависи од компоненте 2 и 3.
Док јединствено тестирамо компоненту1, можемо заменити компоненту2 и компоненту3 користећи Јест Моцкс са њиховим лажним или изруганим колегама.
Погледајмо како можемо да поставимо ове лажне речи. Користићемо једноставне компоненте са ХТМЛ текстом смештеним у див. Прво ћемо видети код за зависне компоненте - Компонента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
Сада, да видимо како ће изгледати Компонента1 која има зависне Компоненте. Овде можете видети да увозимо зависне компоненте и користимо их као једноставну ХТМЛ ознаку попут & односно.
import React, { Component} from 'react' import Component2 from './component2' import Component3 from './component3' class Component1 extends Component { render() { return( Hello Component1 ) } } export default Component1
Сада, да видимо како можемо да напишемо тестове за ову компоненту. Да бисте креирали тест, направите директоријум „тестови“ у директоријуму „срц“. Ово је само да би се осигурало да наш директориј пројеката остане чист и организован.
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() }) })
У горњој тест датотеци можете видети да смо се подсмевали компонентама 1 и 2 користећи функцију ис.моцк
jest.mock('../components/component2', () => () => Hello Mock Component2 )
Ова поставка ће једноставно заменити све позиве Компоненте2 овом лажном представом. Дакле, када прикажемо Цомпонент1 у тесту, он позива исмејану верзију Цомпонент2, што смо такође утврдили провером да ли Моцк див елементи постоје у документу.
Овде смо користили подударање „тоБеИнТхеДоцумент (). Ово подударање је специфично за Реацт, јер коначни приказ резултата Реацт апликација није ништа друго до ХТМЛ код. Дакле, ово подударање тражи да дати ХТМЛ елемент буде присутан у ХТМЛ документу који је креирао Реацт.
Видео лекција: Јест - Моцк Реацт Цомпонентс
Исмевање функција помоћу Јест-а
Сада, да видимо како можемо да користимо Јест подсмехе за исмевање одређене функције за дату ЈаваСцрипт датотеку.
На горњој слици можете видети да функцију 2, која је зависност функције1, замењујемо верзијом функције 2
Прво ћемо створити тестну ЈаваСцрипт датотеку која ће служити као апликација на тесту и тамо ћемо се подсмевати неким методама да бисмо илустровали концепт функције ругања.
function getFullName(firstname, lastname) { return firstname + ' ' + lastname } function greet(firstname, lastname) { return 'Hello! ' + this.getFullName(firstname,lastname) } module.exports = {getFullName, greet}
Овде имамо две функције, тј. Греет () и гетФуллНаме (). Функција греет () користи гетФуллНаме () за добивање пуног имена. Видећемо како можемо заменити функцију гетФуллНаме () њеном лажном имплементацијом док тестирамо методу греет ().
Напишимо једноставан тест за исмевање овог понашања помоћу функције Јест моцк и видећемо како можемо да потврдимо да ли је изругивана функција позвана или не.
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') })
Овде смо прогласили Јест лажну функцију и поставили повратну вредност као „исмевано име“ која ће се вратити када се функција позове.
const mock = jest.fn().mockReturnValue('mocked name')
Такође, да бисмо потврдили да је лажни позив позван, можемо користити подударање Јест као што је приказано доле.
софтвер за поправак рачунара за Виндовс 10
- тоХавеБеенЦаллед () - Проверава да ли је лажни позив позван.
- тоХавеБеенЦалледВитх (арг1, арг2) - Проверава да ли је лаж позван са датим аргументима.
- тоХавеБеенЦалледТимес (н) - Проверава колико пута би Моцк био позван.
Постоји још једна карактеристика Јест-а која се зове Шпијун.
Па шта су Шпијуни и по чему се разликују од лажних?
Већину времена, Спиес дозвољава стварни позив функције, али би могао да се користи за потврду ствари попут аргумената који су коришћени за позивање методе, као и за утврђивање да ли се позив методе догодио или не.
Шпијунирање у Јесту се може обавити Постоји шпијун команда. Јест спиОн узима аргументе као објекат и стварну функцију коју треба шпијунирати, тј. Заправо ће позвати функцију која се тестира и понашати се као посредни пресретач.
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') })
Дакле, у горњем коду можете приметити да:
(и) Поставили смо шпијун за методу „гетФуллНаме“ помоћу наредбе у наставку.
const getFullNameSpy = jest.spyOn(greeter, 'getFullName')
(ии) У тврдњама потврђујемо да је шпијун позван очекиваним аргументима.
expect(getFullNameSpy).toHaveBeenCalled() expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar')
Команда Јест спиОн се такође може користити за одређивање лажне имплементације коју треба позвати уместо стварне функције помоћу наредбе у наставку.
const getFullNameSpy = jest.spyOn(greeter, 'getFullName').mockImplementation()
У овом случају, стварни позив функције замењује се лажном имплементацијом која је постављена са шпијуном.
Видео лекција: Јест-Моцк Апи функције
Исмевање спољних АПИ позива помоћу Јест-а
На доњој слици можете видети да фунцтион1 упућује позиве спољној АПИ тачки. На пример - позивање крајње тачке партнера за плаћање која даје одговор на успех или неуспех.
Сада када пишемо јединичне тестове за ову функцију, не можемо очекивати да ћемо позвати спољну крајњу тачку сваки пут када се тестови покрену.
Постоји неколико разлога из којих бисте избегли позивање спољних крајњих тачака у тесту.
- То може укључивати трошкове.
- Његов одговор се не може контролисати. Не можете увек да тестирате све очекиване кодове одговора и грешке.
- Можда није увек доступна - ако спољна крајња тачка није доступна, резултати теста ће бити нестални.
Из свих ових разлога, било би врло корисно када бисмо могли контролисати и зауставити понашање спољне крајње тачке и створити робусне јединичне тестове за нашу функцију.
Погледајмо како можемо постићи подругљиве АПИ позиве користећи Јест фрамеворк. Акиос је НПМ модул који се може преузети / додати у пројекат помоћу наредбе у наставку.
npm install --save-dev axios
Користићемо модул „акиос“ за упућивање АПИ позива у нашој тест функцији, као што је приказано доле.
function getUserData() { axios.get('https://reqres.in/api/users/2') .then(response => console.log(response.data)) .catch(error => console.log(error)); }
Ударамо у лажну спољну крајњу тачку која враћа лажне податке и успех евидентирања и одговор на грешку.
Сада ћемо у нашем јединственом тесту исмевати модул акиос и вратити лажни или исмевани одговор када функција позове ову спољну крајњу тачку.
Тест код ће изгледати као што је приказано доле.
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') }) })
Овде је важно схватити да се овде ругамо целокупном модулу „акиос“, тј. Сваки позив који пређе на модул Акиос током извршења теста прећи ће на извргнуту реализацију и вратити одговор како је конфигурисан у тесту.
Модул се исмева помоћу наредбе у наставку.
const axios = require('axios') jest.mock('axios');
Конфигурисали смо моцк користећи наредбу испод.
axios.get.mockResolvedValue(mockedResponse)
На тај начин можемо да се ругамо одговорима са спољних АПИ тачака. Овде смо користили крајњу тачку „ГЕТ“, али исти приступ могао би се користити и за друге крајње тачке као што су ПОСТ, ПУТ итд.
Видео лекција: Јест - Моцк Апи крајње тачке
Закључак
У овом упутству научили смо како да направимо једноставну Реацт апликацију и видели смо како се Јест Реацт може користити за извођење тестова снимка на Реацт компонентама, као и за подсмевање Реацт компонентама у целини.
Такође смо истраживали ругање помоћу функција Јест и Спиинг помоћу команде Јест спиОн која позива стварну имплементацију методе и делује као пресретач за потврђивање ствари попут броја позива, аргумената са којима је метода позвана итд.
ПРЕВ Туториал |. | СЛЕДЕЋА Лекција
Препоручено читање
- Водич за Јест - ЈаваСцрипт јединствено тестирање помоћу Јест Фрамеворк-а
- Јест конфигурација и отклањање грешака на основу тестова заснованих на Јест-у
- 25 најбољих Јава оквира за тестирање и алата за аутоматско тестирање (3. део)
- Како поставити Ноде.јс оквир за тестирање: Водич за Ноде.јс
- Увод у ЈУнит Фрамеворк и његову употребу у сценаријуму Селениум - Водич за селен # 11
- Водич за Јасминов оквир, укључујући јасминов џери са примерима
- Водич за Јава Цоллецтионс Фрамеворк (ЈЦФ)