Frontend
October 15, 2023

Понимание основ работы Jest: написание и запуск тестов  

Jest - это популярная библиотека для тестирования JavaScript-кода. Она позволяет писать и запускать тесты, чтобы убедиться, что код работает правильно.

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

Установка Jest

Чтобы использовать Jest, нужно установить его в проект через npm:

npm install --save-dev jest

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

Первый тест с Jest

Давайте посмотрим, как выглядит простой тест на Jest.

Создадим файл sum.js с функцией сложения:

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

module.exports = sum;

Теперь создадим файл sum.test.js с тестом для этой функции:

const sum = require('./sum');

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

Разберем этот код:

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

Теперь запустим тест командой:

npm test

Jest выполнит тест и выведет результат - наш тест прошел успешно!

Основные концепции Jest

Jest имеет несколько ключевых концепций, которые помогают писать хорошие тесты. Рассмотрим самые важные.

Matchers

Матчеры (утверждения) позволяют проверить результат кода.

Например:

expect(result).toBe(true); // проверка на равенство 

expect(array).toContain(item); // проверка, что массив содержит элемент

Jest имеет много полезных матчеров для разных случаев.

Describe и It

describe() позволяет группировать связанные тесты, а it() - определяет отдельный тест:

describe('Math functions', () => {

  it('can add two numbers', () => {
    // тест для сложения 
  });
  
  it('can substract numbers', () => {
    // тест для вычитания
  });
  
});

Такая структура помогает организовать тесты и сделать выводы понятнее.

Асинхронные тесты

Некоторый код выполняется асинхронно, например обращение к API или базе данных. Jest может работать и с таким кодом.

Для этого в тесте передается дополнительный аргумент - callback, который нужно вызвать по завершении асинхронной операции:

test('can fetch data', (done) => {
  function callback(data) {
    expect(data).toBe('Some result');
    done();
  }
  
  fetchData(callback); 
});

Так Jest будет ждать вызова done(), прежде чем завершить тест.

Фикстуры и подготовка к тестам

Иногда нужно подготовить данные или среду перед запуском тестов. Для этого в Jest есть:

  • beforeEach - выполняется перед каждым тестом в describe
  • beforeAll - выполняется один раз перед всеми тестами
  • afterEach и afterAll - выполняются после тестов

Например:

let user;

beforeEach(() => {
  user = createTestUser(); 
});

test('can login', () => {
  loginUser(user);
  expect(user.isLoggedIn).toBe(true);
});

Так мы инициализируем user перед каждым тестом.

Тестирование компонентов и функций

Jest отлично подходит для тестирования функций, React-компонентов и других частей приложения.

Для React-компонента тест может выглядеть так:

import React from 'react';
import { render } from '@testing-library/react';
import UserInfo from './UserInfo';

test('displays user name', () => {
  const user = {name: 'John'};
  
  const {getByText} = render(<UserInfo user={user} />);
  
  expect(getByText('John')).toBeInTheDocument();
});

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

Обзор результатов тестирования

После запуска Jest выведет результаты тестов и сообщит, какие из них прошли успешно, а какие нет.

Это позволит увидеть, какие части кода работают неправильно и найти ошибки. Например:

✓ может складывать два числа 
✕ не может вычитать большее из меньшего 

● не может вычитать большее из меньшего

Expected: 3
Received: -3

Исправив код, можно перезапустить тесты и убедиться, что они проходят успешно.

Итог

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