Как начать работу с Jest для модульного тестирования JavaScript — CloudSavvy IT

Шутный логотип.

Jest — это фреймворк для запуска «модульных тестов», который позволяет вам тестировать отдельные функции и компоненты из вашей базы кода, чтобы гарантировать, что будущие коммиты не сломают что-то неожиданное. Мы покажем вам, как его настроить, и используем его с интерфейсом, например React.

Что такое модульное тестирование?

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

Jest — это фреймворк для запуска «модульных тестов». «Единицей» может быть любое количество вещей — функция, класс или компонент — он просто представляет наименьшую единицу кода, которую вы должны тестировать, чтобы убедиться, что будущие обновления кода ничего не сломают. Если вы напишите функцию, которая извлекает некоторые данные из конечной точки и возвращает некоторые выходные данные, вы напишите соответствующий модульный тест, который примет эту функцию, вызовет ее и зарегистрирует выходные данные. Затем вы можете сделать утверждения на основе того, что он вернул. Правильно ли отформатирован? Какие-нибудь значения не определены? Это работает как ожидалось? Если какой-либо из этих тестов не пройден, в вашем коде что-то не так.

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

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

Начало работы с Jest

Чтобы настроить простую среду тестирования, создайте новый проект с npm init -yи установите Jest как зависимость для разработки от npm:

npm install --save-dev jest

Чтобы запустить тесты из командной строки, вам нужно добавить простой скрипт в package.json что вызывает Джест:

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

Вам понадобится функция для тестирования, поэтому создайте новый файл в src/doSomeMath.jsи установите его для экспорта функции:

function doSomeMath(a, b) {
  return a + b;
}

module.exports = doSomeMath;

Сохраните этот файл и откройте tests/doSomeMath.test.js, Шут будет автоматически смотреть в test/ каталог для поиска тестов для запуска. Этот файл действует как сопутствующий файл для doSomeMath.jsи определяет набор тестов для проверки правильности работы всех функций. Базовый тест Jest выглядит примерно так:

test('Description', () => {
  expect(functionName(args)).toBe(result);
});

В основном, test() Функция оборачивает весь код для теста. каждый expect() Блок вызывает функцию (т. е. единицу), а затем передает значение «сопоставителю». В этом случае это toBe() функция, которая проверяет простое равенство.

Шут имеет много разных совпадений, которые вы можете читать все о в своих документах, Назвать несколько:

  • .not.matcher() обрабатывает инверсию любого совпадения.
  • toBe() проверяет на точное равенство (Object.is) но особенно не обрабатывает объекты.
  • toEqual() проверяет глубокое равенство объектов.
  • toStrictEqual() такой же как toEqual но также гарантирует, что ни один объект не имеет дополнительных неопределенных свойств.
  • toBeTruthy() и toBeFalsy() проверить все, что оценивается в true или false в if заявление.
  • toBeNull() , toBeUndefined() , и toBeDefined() все проверяют на разные состояния объектов.
  • toContain() проверяет содержимое массива
  • toMatch() сопоставляет регулярное выражение со строкой.
  • toThrow() гарантирует, что код выдаст ошибку (обычно для проверки неверного ввода).

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

const doSomeMath = require('../src/doSomeMath');

test('adds 2 + 2 to equal 4', () => {
  expect(doSomeMath(1, 1)).toBe(2);
  expect(doSomeMath(2, 2)).toBe(4);
});

Сохраните этот файл, затем запустите:

npm run test

Это запустит все ваши тесты и выведет результаты для каждого из них.

шутливые тесты

Все должно пройти, если математика работает правильно. Если это не поможет, Jest предоставит вам подробное описание того, что пошло не так, и поможет вам найти причину проблемы.

Поскольку Jest-код — это всего лишь JavaScript, вы можете легко создавать сценарии своих тестов. Например, вы можете использовать цикл for и вызвать expect несколько раз с итеративным вводом. Если любое исполнение expect не пройден, сам тест провалится.

test('adds 2 + 2 to equal 4', () => {
  for (let a = 1; a < 10; a++) {
   expect(doSomeMath(a, 5)).toBe(a + 5)
  }
});

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

  • Организовать, где данные подготовлены для блока
  • Акт, где вызывается модуль, передал упорядоченные данные, и вывод записывается
  • Утвердите, где вы запускаете все свои средства сравнения, чтобы убедиться, что все работает как задумано

Тестирование с помощью React

Убедиться в том, что математика работает, - это круто и все, но вы, вероятно, не собираетесь использовать Jest для чего-то более простого. Вы, вероятно, заинтересованы в использовании Jest для автоматизации тестирования JavaScript-приложения, возможно, построенного с использованием такой инфраструктуры, как React. Хотя вы все еще должны проводить полное тестирование пользовательского интерфейса с ручным обзором, Jest все еще можно использовать для тестирования компонентов React изолированно. В конце концов, компоненты React - это просто функции, которые возвращают вывод JSX - это можно сопоставить и проверить.

Для начала создайте новый проект React с create-react-app:

npx create-react-app jest-react

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

Изменить по умолчанию App.js компонент к следующему:

import React, {useState} from 'react';
import './App.css';

function App() {
  const [disabled, setDisabled] = useState(false);

  function handleClick() {
    setDisabled(!disabled);
  }

  return (
    
  );
}

export default App;

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

Открыть App.test.js, который уже создан Create React App, чтобы содержать тест для логотипа React по умолчанию. Вместо этого измените тест по умолчанию на следующее:

import React from 'react';
import { render, fireEvent } from '@testing-library/react';

import App from './App';

test('disabled button on click', () => {
  const button = render().getByTestId('useless-button');

  expect(button.disabled).toBeFalsy();

  fireEvent.click(button, {button: 1});

  expect(button.disabled).toBeTruthy();
});

Этот тест выводит компонент, используя рендеринг библиотеки тестирования React, и находит кнопку на основе идентификатора теста, который мы ему дали (хотя, Есть много разных селекторов это не будет загромождать ваш код компонента). Это гарантирует, что кнопка не отключена от летучей мыши, затем запускает событие клика (Обратите внимание, что {button: 1} это просто код для щелчка левой кнопкой мыши.) Состояние обновляет, что вызывает повторное рендеринг, и мы проверяем снова, чтобы убедиться, что кнопка теперь отключена.

Важно всегда проверять вывод функций. В большинстве случаев вам совершенно не важно, как эта функция реализована под капотом, просто она возвращает правильный вывод. Этот компонент является просто функцией, которая возвращает кнопку, которая может или не может быть отключена. Нам все равно, что кнопка использует API состояния React, поэтому мы проверяем, содержит ли возвращаемый HTML-код отключенную кнопку или нет. Это не значит, что вы не можете проверить состояние, но вы должны подумать, нужно ли это или нет.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.