Как тестировать приложения с помощью Jest

Содержание

1. Что такое Jest?
2. Как настроить Jest для вашего JavaScript-проекта
   1. Предварительные условия
   2. Установите пакет Jest
   3. Настройка Jest
      1. Настроить Jest в package.json
      2. Настройка Jest в файле конфигурации
   4. Создание базового тестового файла
      1. Напишите тест
      2. Выполните тест
3. Как писать тесты с Jest
   1. Синтаксис тестов Jest
   2. Организация тестов в тестовые наборы
   3. Написание простых утверждений с помощью Jest Matchers
   4. Тестируем асинхронный код
4. Расширенные возможности Jest
   1. Mock-функции и модули
5. Тестирование React-компонентов с помощью Jest и библиотеки тестирования React
   1. Запуск отчетов о покрытии кода
6. Интеграция Jest с процессом разработки
   1. Запуск тестов в режиме наблюдения
   2. Настройка крючков предварительного коммита
7. Резюме

Тестирование программного обеспечения жизненно необходимо для того, чтобы ваши приложения работали так, как ожидалось, особенно когда вы вносите изменения. Выявление и исправление ошибок на ранних этапах разработки имеет решающее значение для поддержания надежного и качественного кода.

Из множества доступных инструментов и фреймворков для тестирования JavaScript Jest является одним из самых популярных. Продукт компании Meta, Jest обладает широкими возможностями тестирования JavaScript-приложений и приложений, созданных с использованием JavaScript-фреймворков.

Давайте рассмотрим фреймворк Jest, его возможности и то, как лучше всего интегрировать его в рабочий процесс разработки.

Что такое Jest?

Jest - это гибкий и простой в использовании фреймворк. В дополнение к основным функциям тестирования JavaScript, он предлагает конфигурации и плагины для поддержки тестирования приложений на основе Babel, webpack, Vite, Parcel или TypeScript.

Jest получил широкое распространение среди разработчиков и может похвастаться множеством плагинов, созданных и поддерживаемых сообществом. Он отличается простотой использования: Тестирование JavaScript не требует дополнительных настроек или плагинов. Но вы можете выполнять и более сложное тестирование - например, тестирование JavaScript-фреймворков - используя некоторые дополнительные параметры конфигурации.

Как настроить Jest для вашего JavaScript-проекта

Давайте рассмотрим, как настроить Jest в существующем проекте JavaScript.

Предварительные условия

Чтобы следовать этому руководству, убедитесь, что у вас есть следующее:

• Node.js установлен.
• Установлен npm (уже входит в состав Node.js) или Yarn.
• Установлен пакет Jest npm.

Установите пакет Jest

1. Если у вас еще нет проекта, чтобы следовать этому руководству, используйте это репо в качестве отправной точки.

Ветка starter-files дает вам основу для создания приложения по ходу обучения. Обратитесь к ветке [main](https://github.com/VirtuaCreative/kinsta-jest-javascript/tree/main) для просмотра кода этого руководства и перекрестной проверки вашего кода.

2. Чтобы установить Jest с помощью npm, перейдите в каталог проекта в терминале и выполните следующую команду:

npm install --save-dev jest

Опция --save-dev указывает npm установить пакет под devDependencies, который содержит зависимости, необходимые для разработки.

Настройка Jest

Хотя Jest обычно работает без дополнительной настройки, есть два способа расширить его возможности: в файле package.json и через файл конфигурации Jest.

Настроить Jest в package.json

В файле package.json добавьте объект jest со свойствами, как показано ниже:

{
  ...
  "jest": {
    "displayName": "Ecommerce",
    "globals": {
      "PROJECT_NAME": "Ecommerce TD"
    },
    "bail": 20,
    "verbose": true
  },
}

Во время тестирования Jest ищет этот объект и применяет эти конфигурации. Дополнительные параметры можно посмотреть на странице конфигураций Jest, но свойства этого объекта включают:

• displayName - Jest добавляет значение этого свойства в качестве метки к результатам теста.
• globals - Хранит значение объекта для определения глобальных переменных, доступных в вашем тестовом окружении.
• bail - По умолчанию Jest выполняет все тесты и отображает ошибки в результатах. bail указывает Jest прекратить выполнение после заданного количества неудач.
• verbose - Если установлено значение true, то во время выполнения теста отображаются отдельные тестовые отчеты.

Настройка Jest в файле конфигурации

Вы также можете настроить Jest в файле jest.config.js. Jest также поддерживает расширения .ts, .mjs, .cjs и .json. При выполнении тестов Jest ищет эти файлы и применяет настройки в найденном файле.

Например, рассмотрим этот файл jest.config.js:

const config = {
	displayName: 'Ecommerce',
	globals: {
		PROJECT_NAME: 'Ecommerce TD',
	},
	bail: 20,
	подробный: true,
};

module.exports = config;

Этот код экспортирует объект конфигурации Jest с теми же свойствами, что и в предыдущем примере.

Вы также можете использовать пользовательский файл, содержащий JSON-сериализуемый объект конфигурации, и передавать путь к файлу в опции --config при выполнении тестов.

Создание базового тестового файла

Настроив Jest, создайте свои тестовые файлы. Jest просматривает тестовые файлы вашего проекта, выполняет их и предоставляет результаты. Тестовые файлы обычно имеют такой формат, как [name].test.js или [name]-test.js. Этот шаблон облегчает идентификацию тестовых файлов как для Jest, так и для вашей команды.

Рассмотрим файл string-format.js, содержащий следующий код:

function truncate(
  str,
  count,
  withEllipsis = true
) {
  if (str.length < = count)
    вернуть str

  const substring = str.substr(0, count)

  if (!withEllipsis)
    вернуть подстроку

  return substring + '...'
}

module.exports = { truncate }

Функция truncate() усекает строки до определенной длины с возможностью добавления многоточия.

Напишите тест

1. Создайте тестовый файл с именем string-format.test.js.

2. Чтобы сохранить упорядоченность файлов, поместите string-format.test.js в тот же каталог, где находится файл string-format.js, или в специальный каталог тестов. Независимо от того, где находится ваш тестовый файл в проекте, Jest найдет и выполнит его. С помощью Jest вы можете тестировать свои приложения в различных сценариях.

3. Напишите базовый тест в string-format.test.js следующим образом:

const { truncate } = require('./string-format')

test('корректно усекает строку', () = > {
expect(truncate("Я иду домой", 6)).toBe('Я иду...')
})

Тестовый пример имеет описание корректно усекает строку. Этот код использует функцию expect, предоставляемую Jest, которая проверяет, соответствует ли значение ожидаемому результату.

Код передает truncate("Я иду домой", 6) в качестве аргумента expect. Этот код проверяет значение, возвращаемое при вызове truncate с аргументами "Я иду домой" и 6. Вызов expect возвращает объект expectation, который предоставляет доступ к соответствиям Jest.

Он также содержит матчер toBe, аргументом которого является "Я иду домой...". Матчер toBe проверяет равенство между ожидаемым и действительным значениями.

Выполните тест

Чтобы выполнить тесты, определите команду jest.

1. В файл package.json вашего проекта добавьте этот скрипт test:

"scripts": {
  "test": "jest"
}

2. Теперь запустите npm run test, npm test или npm t в терминале. Это запустит Jest для проекта.

Когда вы выполните тесты, результат будет таким:

Успешный результат теста Jest для string-format.test.js.

Результаты показывают один набор тестов (файл string-format.test.js), один успешно выполненный тест ("правильно усекает строку") и displayName (Ecommerce), который вы определили в конфигурации.

3. В файле string-format.js, если добавить лишнюю точку, чтобы сломать код и запустить тест, он завершится неудачей:

Неудачный результат теста Jest из-за неработающей функции truncate.

Этот результат указывает на то, что вы сломали функцию truncate или сделали обновления, которые требуют обновления тестов.

Как писать тесты с Jest

Синтаксис тестов Jest

Собственный синтаксис Jest прост в использовании. Jest предоставляет вашему проекту глобальные методы и объекты для написания тестов. Некоторые из его фундаментальных понятий - describe, test, expect и matchers.

• describe: Эта функция группирует связанные тесты в файл.
• test: Эта функция запускает тест. Это псевдоним для it. Она содержит утверждения для значений, которые вы хотите проверить.
• expect: Эта функция объявляет утверждения для различных значений. Она предоставляет доступ к матчерам для различных форм утверждений.
• Матчики: Они позволяют утверждать значение различными способами. Вы можете утверждать равенство значений, булево равенство и контекстное равенство (например, содержит ли массив данное значение).

Чтобы использовать их, рассмотрим следующий пример:

1. Замените тест в файле string-format.test.js следующим кодом:

describe("все форматы строк работают как ожидалось", () = > {
test("правильно усекает строку", () = > {
expect(
truncate("Я иду домой", 6)
).toBe("Я ж...")
})
})

2. Запустите код.

Результат выглядит следующим образом:

Успешный результат теста Jest, показывающий метку describe.

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

Организация тестов в тестовые наборы

В Jest тестовый пример состоит из функции test, функции expect и матчера. Набор связанных между собой тестовых примеров является тестовым набором. В предыдущем примере string-format.test.js - это набор тестов, состоящий из одного тестового случая для проверки файла string-format.js.

Предположим, что в вашем проекте есть еще несколько файлов, например file-operations.js, api-logger.js и number-format.js. Вы можете создать наборы тестов для этих файлов, например file-operations.test.js, api-logger.test.js и number-format.test.js.

Написание простых утверждений с помощью Jest Matchers

Мы рассмотрели пример использования матчера toBe. Утверждения с другими матчерами Jest включают:

• toEqual - Для проверки ”глубокого” равенства в экземплярах объектов.
• toBeTruthy - Для проверки истинности значения в булевом контексте.
• toBeFalsy - Для проверки ложности значения в булевом контексте.
• toContain - Для проверки того, что массив содержит значение.
• toThrow - Для проверки того, что вызванная функция выбрасывает ошибку.
• stringContaining - Для проверки того, что строка содержит подстроку.

Давайте рассмотрим примеры с использованием некоторых из этих матчеров.

Например, вы можете ожидать, что функция или код вернут объект с определенными свойствами и значениями.

1. Используйте приведенный ниже фрагмент кода для проверки этой функциональности. В этом случае вы хотите подтвердить, что возвращаемый объект равен ожидаемому объекту.

expect({
	имя: 'Джо',
	возраст: 40,
}).toBe({
	имя: 'Джо',
	возраст: 40,
});

В этом примере используется toBe. Тест не проходит, так как этот матчер не проверяет глубокое равенство - он проверяет значение, а не все свойства.

2. Используйте матчер toEqual для проверки глубокого равенства:

expect({
	имя: 'Джо',
	возраст: 40,
}).toEqual({
	имя: 'Джо',
	возраст: 40,
});

Тест пройден, так как оба объекта ”глубоко равны”, то есть все их свойства равны.

3. Попробуйте другой пример с матчером, который проверяет, содержит ли заданный массив определенный элемент.

expect(['апельсин', 'груша', 'яблоко']).toContain('манго');

Этот тест провалился, потому что toContain утверждает, что массив ["orange", "pear", "apple"] содержит ожидаемое значение "mango", но массив не содержит его.

4. Используйте переменные для того же теста, что и в приведенном ниже коде:

const fruits = ['апельсин', 'груша', 'яблоко'];
const expectedFruit = 'манго';

expect(fruits).toContain(expectedFruit);

Тестируем асинхронный код

До сих пор мы тестировали синхронный код - выражения, которые возвращают значение до того, как код выполнит следующую строку. Вы также можете использовать Jest для асинхронного кода с помощью async, await или Promises.

Например, в файле apis.js есть функция для выполнения API-запроса:

function getTodos() {
	return fetch('https://jsonplaceholder.typicode.com/todos/1');
}

Функция getTodos отправляет запрос GET на адрес https://jsonplaceholder.typicode.com/todos/1.

1. Создайте файл с именем apis.test.js со следующим кодом для тестирования поддельного API:

const { getTodos } = require('./apis')

test("получает объект todo с нужными свойствами", () = > {
return getTodos()
.then((response) = > {
return response.json()
})
.then((data) = > {
expect(data).toHaveProperty('userId')
expect(data).toHaveProperty('id')
expect(data).toHaveProperty('title')
expect(data).toHaveProperty('completed')
expect(data).toHaveProperty('description')
})
})

Этот тестовый пример вызывает функцию getTodos, которая получает объект todo. Когда он разрешает Promise, он использует метод .then для получения разрешенного значения.

В этом значении код возвращает response.json(), который является еще одним Promise, преобразующим ответ в формат JSON. Еще один метод .then получает объект JSON, содержащий expect и matchers. Код утверждает, что объект JSON включает пять свойств: userId, id, title, completed и description.

2. Выполните тесты:

Результат теста Jest, показывающий неудачный тест для асинхронного кода.

Как видно на скриншоте, тест для getTodos() провалился. Он ожидает свойства description, но API его не возвращает. Имея эту информацию, вы можете попросить команду управления API вашей компании включить это свойство, если оно необходимо приложению, или обновить тесты, чтобы они соответствовали ответу API.

3. Удалите утверждение для свойства description и запустите тесты заново:

Результат теста Jest, показывающий пройденный тест для асинхронного кода.

На скриншоте видно, что все прошло тест.

4. Теперь попробуйте использовать async/await вместо традиционной обработки Promise:

test("получает объект todo с нужными свойствами", async () = > {
  const response = await getTodos()
  const data = await response.json()

  expect(data).toHaveProperty("userId")
  expect(data).toHaveProperty("id")
  expect(data).toHaveProperty("title")
  expect(data).toHaveProperty("completed")
})

Ключевое слово async теперь находится перед функцией. В коде используется await перед getTodos() и await перед response.json().

Расширенные возможности Jest

Mock-функции и модули

При написании тестов вы можете захотеть протестировать выражение с внешними зависимостями. В некоторых случаях, особенно при модульном тестировании, ваши тесты должны быть изолированы от внешних эффектов. В этом случае вы можете подружить свои функции или модули с Jest, чтобы лучше контролировать свои тесты.

1. Например, рассмотрим файл functions.js, содержащий следующий код:

function multipleCalls(count, callback) {
	if (count < 0) return;

	for (let counter = 1; counter <= count; counter++) {
		callback();
	}
}

Функция multipleCalls выполняется в зависимости от значения count. Она зависит от функции обратного вызова - внешней зависимости. Ее цель - узнать, правильно ли multipleCalls выполняет внешнюю зависимость.

2. Чтобы подружиться с внешней зависимостью и отслеживать ее состояние в тестовом файле functions.test.js, используйте следующий код:

const { multipleCalls } = require('./functions');

test('функции вызываются несколько раз правильно', () => {
	const mockFunction = jest.fn();

	multipleCalls(5, mockFunction);

	expect(mockFunction.mock.calls.length).toBe(5);
});

Здесь метод fn объекта jest создает mock-функцию. Затем код выполняет команду multipleCalls, передавая в качестве аргументов 5 и имитатор функции. Затем утверждается, что mockFunction вызывается пять раз. Свойство mock содержит информацию о том, как код вызывает функцию и возвращаемые значения.

3. При выполнении теста ожидается следующий результат:

Успешный результат Jest-теста с имитацией функции.

Как показано, код вызывает mockFunction пять раз.

В коде имитационная функция имитирует внешнюю зависимость. Неважно, что это за внешняя зависимость, когда приложение использует multipleCalls в производстве. Вашему модульному тесту все равно, как работает внешняя зависимость. Он просто проверяет, что multipleCalls работает так, как ожидается.

4. Чтобы подражать модулям, используйте метод mock и передайте путь к файлу, который является модулем:

const { truncate } = require('./string-format');

jest.mock('./string-format.js');

Этот код имитирует все функции, которые экспортирует string-format.js, и отслеживает, как часто он их вызывает. Функция truncate модуля становится имитатором функции, в результате чего она теряет свою первоначальную логику. Вы можете узнать, сколько раз truncate выполняется в ваших тестах в свойстве truncate.mock.calls.length.

Если у вас возникла ошибка или ваш код не работает, сравните его с полной реализацией.

Тестирование React-компонентов с помощью Jest и библиотеки тестирования React

Если у вас еще нет проекта, по которому вы могли бы следовать в рамках этого руководства, вы можете использовать этот проект примера React в качестве отправной точки. Ветка starter-files поможет вам начать составлять код, следуя руководству. Используйте ветку main в качестве ссылки, чтобы сверять свой код с полным кодом этого руководства.

Вы можете использовать Jest для тестирования JavaScript-фреймворков, таких как React. Когда вы создаете проекты React с помощью Create React App, они поддерживают React Testing Library и Jest из коробки. Если вы создаете проект React без Create React App, установите Jest для тестирования React с помощью Babel и React testing library. Если вы клонируете ветку starter-app, вам не нужно устанавливать зависимости или применять конфигурации.

1. Если вы используете проект-пример, используйте эту команду для установки необходимых зависимостей:

npm install --save-dev babel-jest @babel/preset-env @babel/preset-react react-testing-library

Вы также можете использовать Enzyme вместо React Testing Library.

2. Обновите конфигурацию Babel в babel.config.js или создайте этот файл, если он не существует:

module.exports = {
	presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }]],
};

3. Рассмотрим файл src/SubmitButton.js, содержащий следующий код:

import React, { useState } from 'react'

export default function SubmitButton(props) {
  const {id, label, onSubmit} = props
  const [isLoading, setisLoading] = useState(false)

  const submit = () => {
    setisLoading(true)
    onSubmit()
  }

  return

Этот компонент SubmitButton получает три реквизита:

• id - идентификатор кнопки.
• label - Какой текст отображать в кнопке.
• onSubmit - Какая функция должна срабатывать, когда кто-то нажимает на кнопку.

Код присваивает параметр id атрибуту data-testid, который идентифицирует элемент для тестирования.

Компонент также отслеживает состояние isLoading и обновляет его до true, когда кто-то нажимает на кнопку.

4. Создайте тест для этого компонента. Поместите следующий код в файл SubmitButton.test.js:

import { fireEvent, render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import SubmitButton from './SubmitButton';

test('Кнопка SubmitButton становится неактивной после нажатия', () => {
	const submitMock = jest.fn();

	render(<SubmitButton id="submit-details" label="Submit" onSubmit={submitMock} />);

	expect(screen.getByTestId('submit-details')).not.toBeDisabled();

	fireEvent.submit(screen.getByTestId('submit-details'));

	expect(screen.getByTestId('submit-details')).toBeDisabled();
});

Приведенный выше код рендерит компонент SubmitButton и использует метод запроса screen.getByTestId для получения узла DOM по атрибуту data-testid.

Первый expect - getByTestId("submit-details") и использует модификатор not и матчер toBeDisabled (раскрывается из react-testing-library) для утверждения, что кнопка не отключена. Используйте модификатор not с каждым матчером, чтобы утверждать обратное матчеру.

Затем код запускает событие `submit на компоненте и проверяет, что кнопка отключена. Больше пользовательских матчиков можно найти в документации по библиотеке тестирования.

5. Теперь запустите тесты. Если вы клонировали ветку starter-files, убедитесь, что все зависимости проекта установлены, выполнив npm install перед запуском тестов.

Результат Jest-теста, показывающий, что тест компонента react пройден.

Запуск отчетов о покрытии кода

Jest также предлагает отчеты о покрытии кода, чтобы показать, какую часть вашего проекта вы тестируете.

1. Передайте Jest опцию --coverage. В сценарии Jest в файле package.json (в проекте JavaScript) обновите команду Jest с этой опцией покрытия:

"scripts": {
  "test": "jest --coverage"
}

2. Запустите npm run test для проверки вашего кода. Вы получите отчет, как показано ниже:

Отчет об успешном покрытии Jest для каждого тестового костюма.

Этот отчет показывает, что Jest протестировал 100 % функций в SubmitButton.js и string-format.js. Он также показывает, что Jest не проверил ни одного утверждения и строки в string-format.js. Покрытие тестов показывает, что непокрытыми строками в string-format.js являются 7 и 12.

В строке 7 функция return str в функции truncate не выполняется, потому что условие if (str.length <= count) возвращает false.

В строке 12, также в функции truncate, return substring не выполняется, потому что условие if (!withEllipsis) возвращает false.

Интеграция Jest с процессом разработки

Давайте посмотрим, как вы можете интегрировать эти тесты для улучшения вашего рабочего процесса разработки.

Запуск тестов в режиме наблюдения

Вместо того чтобы выполнять тесты вручную, вы можете запускать их автоматически при изменении кода, используя режим watch.

1. Чтобы включить режим наблюдения, обновите командный сценарий Jest в package.json (в проекте JavaScript), добавив опцию --watchAll:

"scripts": {
"test": "jest --coverage --watchAll"
}

2. Запустите npm run test. Это запустит Jest в режиме просмотра:

Запуск Jest в режиме просмотра.

Тесты запускаются каждый раз, когда вы изменяете проект. Такой подход способствует непрерывной обратной связи по мере создания приложения.

Настройка крючков предварительного коммита

В средах Git хуки выполняют скрипты каждый раз, когда происходит определенное событие (например, pull, push или commit). Хуки предварительной фиксации определяют, какие скрипты запускаются для события предварительной фиксации (которое код запускает перед фиксацией).

Коммит проходит успешно, только если скрипт не выдает ошибку.

Запуск Jest перед pre-commit гарантирует, что ни один из ваших тестов не сработает до фиксации.

Вы можете использовать различные библиотеки для установки git hooks в вашем проекте, например ghooks.

1. Установите ghooks в разделе devDependencies:

npm install ghooks --save-dev

2. Добавьте объект configs в верхний уровень вашего файла package.json (в проекте JavaScript).

3. Добавьте объект ghooks под configs.

4. Добавьте свойство с ключом pre-commit и значением jest.

{
...
"config": {
"ghooks": {
"pre-commit": "jest"
}
},
}

5. Зафиксируйте код. Код запускает хук pre-commit, который выполняет Jest:

Запуск Jest во время предварительной коммисии с помощью ghooks.

Резюме

Теперь вы знаете, как интегрировать Jest в рабочий процесс разработки, чтобы он автоматически выполнялся каждый раз, когда вы вносите изменения. Такой подход обеспечивает непрерывную обратную связь, чтобы вы могли быстро исправить любые проблемы в коде перед выпуском изменений в производство.