Jest — это среда тестирования JavaScript, созданная Facebook. Он очень популярен среди разработчиков, потому что он прост в использовании, имеет множество встроенных функций и работает быстро.

В этом уроке мы рассмотрим следующие темы:

  1. Установка Jest
  2. Написание и запуск тестов
  3. Сопоставители Common Jest
  4. Мокирующие функции и модули
  5. Тестирование асинхронного кода

Давайте начнем!

1. Установка Jest

Первый шаг к использованию Jest — установить его в свой проект. Вы можете сделать это, используя npm или пряжу. Чтобы установить Jest с помощью npm, выполните следующую команду в каталоге вашего проекта:

npm install --save-dev jest

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

yarn add --dev jest

2. Написание и запуск тестов

После того, как вы установили Jest, вы можете начать писать тесты. Тесты в Jest записываются в файлы, оканчивающиеся на .test.js или .spec.js. Например, если у вас есть файл с именем myModule.js, вы можете создать тестовый файл с именем myModule.test.js или myModule.spec.js.

Вот пример простого теста:

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

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

В этом тесте мы определяем функцию с именем sum, которая принимает два аргумента и возвращает их сумму. Затем мы используем функцию test для определения тестового примера. Первый аргумент test — это описание тестового примера, а второй аргумент — это функция, содержащая фактический тестовый код.

В тестовом коде мы используем функцию expect, чтобы делать утверждения о выводе функции sum. В этом случае мы ожидаем, что результатом sum(1, 2) будет 3. Мы используем сопоставитель toBe для сравнения фактического результата с ожидаемым.

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

npm test

or

yarn test

Это запустит все тестовые файлы в вашем проекте, соответствующие шаблону *.test.js или *.spec.js.

3. Сопоставители Common Jest

Jest предоставляет множество встроенных средств сопоставления, которые вы можете использовать для создания утверждений в своих тестах. Вот некоторые распространенные совпадения:

  • toBe(value) - сравнивает фактическое значение с ожидаемым, используя строгое равенство (===)
  • toEqual(value) - рекурсивно сравнивает фактическое значение с ожидаемым, т.е. проверяет содержимое объектов и массивов
  • toBeDefined() — проверяет, что фактическое значение не равно undefined
  • toBeUndefined() — проверяет, что фактическое значение равно undefined
  • toBeNull() — проверяет, что фактическое значение равно null
  • toBeTruthy() — проверяет, что фактическое значение соответствует действительности, т. е. не false, 0, '', null, undefined или NaN
  • toBeFalsy() - проверяет, что фактическое значение является ложным, т. е. false, 0, '', null, undefined или NaN
  • toBeGreaterThan(value) - проверяет, что фактическое значение больше ожидаемого
  • toBeGreaterThanOrEqual(value) - проверяет, что фактическое значение больше или равно ожидаемому значению
  • toBeLessThan(value) - проверяет, что фактическое значение меньше ожидаемого
  • `toBeLessThanOrEqual(value) — проверяет, что фактическое значение меньше или равно ожидаемому значению.
  • toBeCloseTo(value, numDigits) - проверяет, что фактическое значение близко к ожидаемому значению в пределах заданного количества знаков после запятой.
  • toMatch(regexp) — проверяет соответствие фактического значения указанному регулярному выражению
  • toContain(item) — проверяет, что фактическое значение содержит указанный элемент (для массивов или строк)
  • toHaveLength(length) — проверяет, что фактическое значение имеет указанную длину (для массивов или строк)
  • toHaveProperty(propName, propValue) — проверяет наличие у фактического значения свойства с указанным именем и значением

Вы можете найти полный список сопоставителей в документации Jest.

4. Мокирующие функции и модули

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

Вот пример издевательства над функцией:

// myModule.js
export function fetchData() {
  // ...
}
// myModule.test.js
import { fetchData } from './myModule';
test('fetchData calls the API', () => {
  const mockFetchData = jest.fn();
  fetchData(mockFetchData);
  expect(mockFetchData).toHaveBeenCalled();
});

В этом примере у нас есть функция с именем fetchData в myModule.js, которая выполняет вызов API. В нашем тестовом файле мы импортируем функцию fetchData и создаем фиктивную функцию с именем mockFetchData, используя метод jest.fn(). Затем мы вызываем fetchData с mockFetchData в качестве аргумента и используем сопоставитель toHaveBeenCalled, чтобы проверить, был ли вызван mockFetchData.

Вот пример издевательства над модулем:

// myModule.js
import axios from 'axios';

export async function getUser(id) {
  const response = await axios.get(`https://api.example.com/users/${id}`);
  return response.data;
}
// myModule.test.js
import axios from 'axios';
import { getUser } from './myModule';
jest.mock('axios');
test('getUser returns the user data', async () => {
  const userData = { id: 1, name: 'John Doe' };
  axios.get.mockResolvedValue({ data: userData });
  const user = await getUser(1);
  expect(user).toEqual(userData);
});

В этом примере у нас есть функция с именем getUser в myModule.js, которая использует библиотеку axios для вызова API. В нашем тестовом файле мы импортируем axios и getUser, а затем используем метод jest.mock() для имитации модуля axios. Затем мы используем метод mockResolvedValue, чтобы установить значение, которое axios.get вернет при вызове. Наконец, мы вызываем getUser и используем сопоставитель toEqual, чтобы проверить, соответствуют ли возвращенные пользовательские данные ожидаемым пользовательским данным.

5. Тестирование асинхронного кода

Jest предоставляет встроенную поддержку для тестирования асинхронного кода. Есть два способа обработки асинхронного кода в Jest: использование обратных вызовов или использование промисов.

Вот пример использования обратных вызовов:

// myModule.js
export function fetchData(callback) {
  setTimeout(() => {
    callback('data');
  }, 1000);
}
// myModule.test.js
import { fetchData } from './myModule';
test('fetchData returns data', (done) => {
  function callback(data) {
    expect(data).toBe('data');
    done();
  }
  fetchData(callback);
});

В этом примере у нас есть функция с именем fetchData в myModule.js, которая использует setTimeout для имитации асинхронной операции. В нашем тестовом файле мы импортируем fetchData и используем метод test для определения нашего теста. Мы передаем функцию с параметром done методу test, который сообщит Jest, что наш тест асинхронный. Затем мы определяем функцию обратного вызова, которая ожидает, что возвращаемые данные будут 'data', и вызывает done по завершении. Наконец, мы вызываем fetchData с нашей функцией обратного вызова.

Вот пример использования промисов:

// myModule.js
export function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('data');
    }, 1000);
  });
}
// myModule.test.js
import { fetchData } from './myModule';
test('fetchData returns data', () => {
  return fetchData().then((data) => {
    expect(data).toBe('data');
  });
});

В этом примере у нас есть функция с именем fetchData в myModule.js, которая возвращает обещание, которое разрешается с помощью 'data' после задержки в 1 секунду. В нашем тестовом файле мы импортируем fetchData и используем метод test для определения нашего теста. Мы возвращаем обещание, возвращенное fetchData, и используем метод then для определения функции обратного вызова, которая ожидает, что разрешенные данные будут 'data'.

6. Запуск тестов

Для запуска тестов вы можете использовать команду jest в своем терминале. По умолчанию Jest ищет файлы с расширением .test.js или .spec.js в каталоге вашего проекта и запускает их. Вы также можете указать конкретный файл или каталог для запуска тестов:

jest myTestFile.test.js
jest myDirectory

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

Заключение

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