Как начать работу с 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);
});

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

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

export default App;

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-код отключенную кнопку или нет. Это не значит, что вы не можете проверить состояние, но вы должны подумать, нужно ли это или нет.