Меню

Як протестувати програми React за допомогою Jest Framework

how test react apps using jest framework

Спробуйте Наш Інструмент Для Усунення Проблем

У цьому відео-уроці ми навчимося створювати та тестувати React App за допомогою Jest, Mocking за допомогою Jest та Spying за допомогою команди Jest spyOn:

ДО Повне введення Jest було подано в нашому попередньому уроці. У цьому посібнику ми побачимо, як використовувати Jest для тестування програм на основі React.

Ми навчимося створювати завантажений додаток React за допомогою простого над рівнем моря на основі команди та використовуйте той самий додаток для написання тестів реагування Jest. Ми також вивчимо концепцію тестування знімків та дізнаємось, як можна знущатись і шпигувати компоненти React, використовуючи фреймворк Jest та команду Jest spyon.

Тестування 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 Testing

Тестування знімків - це дуже корисна техніка для тестування знімків компонентів React за допомогою бібліотеки Jest.

Спершу спробуємо зрозуміти, що таке тестування знімків по суті означає.

Знімок - це не що інше, як відображення будь-чого у часовій точці. Наприклад, скріншот, знімок камери тощо - це всі знімки, що представляють деталі чого-небудь протягом певного часу.

З точки зору React, Знімок - це не що інше, як представлення часу або вихід компонента React із наданим станом та поведінкою.

Це пояснюється на простому прикладі, використовуючи наступні кроки.

# 1) Щоб розпочати тестування знімків, додайте пакет npm “response-test-renderer”, використовуючи наведену нижче команду.

npm i react-test-renderer

# два) Тепер давайте створимо простий компонент React, який буде нашим тестованим додатком. Цей компонент матиме простий стан у вигляді змінних класу та властивостей сторінки.

Компонент буде виглядати, як показано нижче. Давайте назвемо цей компонент посиланням (і, відповідно, ім’я файлу відповідного компонента реакції буде 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 проекту.

найкращий безкоштовний конвертер файлів для Windows 10

Нижче наведено структуру проекту для цього.

Каталог “__snapshots__”

Каталог “__snapshots__” на наведеному вище скріншоті створюється в кореневому каталозі проекту, коли тест виконується вперше.

f) Подивимось, як буде виглядати файл знімка.

Відкрити файл - Link.test.js.snap

Файл знімка

g) Вище показано знімок, який зберігається для даного компонента.

h) Зараз, наприклад, реалізація вищевказаного компонента змінюється. Наприклад, давайте змінимо ім’я сторінки властивостей на сайт у компоненті та спробуємо запустити тест ще раз.

Ось як змінюється компонент (ми змінили властивість з іменем сторінки на нову властивість з назвою сайт).

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) Тепер припустимо, що ці зміни є обов’язковими змінами, і наші тести вимагають оновлення старого знімка. У такому випадку запустіть тести за допомогою команди update, яка замінить старий знімок і створить новий на основі нових змін у самому компоненті.

Запустити команду

yarn test -u

(j) За допомогою наведеної вище команди та оновленого твердження ви побачите проходження тесту.

Таким чином, загальне тестування знімків є корисною технікою для тестування всього компонента на остаточний вигляд та збереження старого результату як моментального знімка, що гарантує відсутність проблем регресії в результаті змін коду або функцій або, як наслідок, будь-якого рефакторингу до існуючого компонента.

Відео-посібник: Існує тестування знімків

Знущання з використанням Jest

У цьому розділі ми побачимо, як ми можемо використовувати макети Jest. Макет можна використовувати по-різному, як показано нижче.

Наприклад,

  1. Знущання над всім компонентом React
  2. Знущання над однією чи кількома функціями - це не характерно для жодної розробки Javascript. Оскільки Jest - це бібліотека для тестування javascript, яка не є специфічною для якогось конкретного фреймворку, ми навіть можемо використовувати Jest для знущання над простим старим файлом Javascript, що містить функції.
  3. Знущання над викликами API, що використовуються всередині функцій або коду Javascript - ми можемо використовувати Jest для знущань над реакціями сторонніх інтеграційних процесів.

Давайте обговоримо кожен із цих методів глузування детально.

Знущальні компоненти реакції

Додаток React складається з декількох компонентів, що залежать один від одного. Для простого розуміння розгляньте React Component як клас, що має презентацію та логіку.

Як і будь-яка складна система, побудована з використанням об'єктно-орієнтованого програмування, складається з декількох класів, аналогічно, React App - це набір компонентів.

Тепер, коли ми тестуємо компонент, ми хочемо переконатися, що немає залежностей, які впливають на його тестування, тобто якщо є 2 компоненти, від яких залежить компонент, що тестується, то якщо у нас є засоби для глузування із залежних компонентів, тоді ми можемо більш повно перевірити компонент, що перевіряється.

Спробуємо зрозуміти це за допомогою наведеного нижче малюнка:

Знущальні компоненти реакції

Тут ми маємо Component1, який залежить від Component 2 & 3.

Під час модульного тестування Компонента1 ми можемо замінити Компонент2 і Компонент3, використовуючи 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

Тепер давайте подивимось, як буде виглядати Компонент1, який має залежні Компоненти. Тут ви бачите, що ми імпортуємо залежні компоненти і використовуємо їх як простий тег 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() }) })

У наведеному вище тестовому файлі ви можете бачити, що ми знущалися з компонентів 1 і 2, використовуючи функцію є. макет

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

Це налаштування просто замінить усі виклики Component2 цим фіктивним поданням. Отже, коли ми відтворюємо Component1 у тесті, він викликає знущану версію Component2, що ми також стверджували, перевіряючи, чи існують елементи Mock div у документі.

команда сортування в unix з прикладами

Тут ми використовували збіг ‘toBeInTheDocument (). Цей збіг специфічний для React, оскільки кінцевий виведений результат додатків React - це не що інше, як HTML-код. Таким чином, цей збіг шукає, щоб даний елемент HTML був присутній у документі HTML, створеному React.

Відео-посібник: Jest - Імітуйте компоненти реагування

Знущальні функції за допомогою 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) - перевіряє кількість разів, коли було б викликано Макет.

Є ще одна особливість 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. 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. Тут ми використовували кінцеву точку «ОТРИМАТИ», але той же підхід міг бути використаний і для інших кінцевих точок, таких як POST, PUT тощо.

Відео-посібник: Jest - кінцеві точки Mock Api

Висновок

У цьому підручнику ми дізналися, як створити простий додаток React, і побачили, як Jest React можна використовувати для виконання тестів знімків на компонентах React, а також для знущань над React Components в цілому.

Ми також досліджували знущання з використанням Jest та шпигунських функцій за допомогою команди Jest spyOn, яка викликає реальну реалізацію методу та діє як перехоплювач для ствердження щодо таких речей, як кількість викликів, аргументи, з якими був викликаний метод тощо.

НАЗАД Підручник | НАСТУПНИЙ підручник

Рекомендована література

^