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

Содержание:

1. Настройка Jest

2. Написание базовых тестов

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

4. Имитирующие зависимости

5. Тестирование компонентов React

6. Отчеты о покрытии

7. Снимочное тестирование

8. Организация тестирования и лучшие практики

9. Выполнение тестов и непрерывная интеграция

10. Вывод

11. Настройка Jest:
    Чтобы начать, вам необходимо настроить Jest в своем проекте JavaScript. Установите Jest, используя npm или Yarn:

npm install jest --save-dev

Создайте тестовый скрипт в файле package.json:

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

2. Написание базовых тестов.
   Давайте начнем с простого примера тестирования функции, которая складывает два числа:

// math.js
export function add(a, b) {
  return a + b;
}
// math.test.js
import { add } from './math.js';
test('add function adds two numbers correctly', () => {
  expect(add(2, 3)).toBe(5);
});

3. Тестирование асинхронного кода.
   Jest предоставляет утилиты для тестирования асинхронного кода, например обещаний или функций с обратными вызовами. Вот пример:

// async.js
export function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data');
    }, 1000);
  });
}
// async.test.js
import { fetchData } from './async.js';
test('fetchData resolves with the correct data', async () => {
  const data = await fetchData();
  expect(data).toBe('Data');
});

4. Имитация зависимостей.
   Иногда вам необходимо имитировать зависимости, чтобы изолировать тестируемый код. Jest позволяет создавать фиктивные функции и модули. Вот пример:

// fetchData.js
import axios from 'axios';
export async function fetchData() {
  const response = await axios.get('https://api.example.com/data');
  return response.data;
}
// fetchData.test.js
import { fetchData } from './fetchData';
import axios from 'axios';
jest.mock('axios');
test('fetchData returns the correct data', async () => {
  axios.get.mockResolvedValue({ data: 'Mocked Data' });
  const data = await fetchData();
  expect(data).toBe('Mocked Data');
});

5. Тестирование компонентов React.
   Jest также можно использовать для тестирования компонентов React. Вот пример тестирования простого компонента:

// Counter.js
import React, { useState } from 'react';
export function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}
// Counter.test.js
import { render, fireEvent } from '@testing-library/react';
import { Counter } from './Counter';
test('counter increments the count when the button is clicked', () => {
  const { getByText } = render(<Counter />);
  const incrementButton = getByText('Increment');
  fireEvent.click(incrementButton);
  expect(getByText('Count: 1')).toBeInTheDocument();
});

6. Отчеты о покрытии.
   Jest предоставляет готовые отчеты о покрытии кода, позволяя вам измерить, какая часть вашего кода тестируется. Чтобы включить отчеты о покрытии, обновите тестовый скрипт в package.json:

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

7. Тестирование моментальных снимков.
   Тестирование моментальных снимков позволяет захватывать выходные данные компонента или объекта и сравнивать их с сохраненным моментальным снимком. Вот пример:

// renderer.js
export function renderComponent() {
  return '<div>Hello, Jest!</div>';
}
// renderer.test.js
import { renderComponent } from './renderer';
test('renderComponent renders the component correctly', () => {
  expect(renderComponent()).toMatchSnapshot();
});

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

р>

9. Выполнение тестов и непрерывная интеграция.
   Jest предоставляет интерфейс командной строки для запуска тестов. Вы также можете интегрировать Jest в свой конвейер непрерывной интеграции (CI) для автоматического тестирования.

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