Какой код на фронте имеет смысл покрывать unit-тестами?

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

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

Зачем нужны unit-тесты на фронтенде

1. Обеспечение корректности: Unit-тесты помогают убедиться, что отдельные части кода работают так, как ожидается. Это особенно важно для бизнес-логики, где ошибки могут привести к неправильной работе приложения.

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

3. Документация: Тесты служат живой документацией, показывая, как должен работать код.

Какой код тестировать

1. Функции с бизнес-логикой: Это функции, которые выполняют важные вычисления или принимают решения на основе данных. Например, функция, которая рассчитывает скидку на основе различных условий.

   function calculateDiscount(price, isMember) {
       if (isMember) {
           return price * 0.9; // 10% скидка для членов
       }
       return price;
   }
   

   • Тестирование: Проверяем, что функция возвращает правильную цену для членов и не членов.

2. Компоненты с состоянием: Компоненты, которые управляют состоянием и имеют сложную логику отображения.

   function Counter() {
       const [count, setCount] = useState(0);
   ​
       return (
           <div>
               <p>Count: {count}</p>
               <button onClick={() => setCount(count + 1)}>Increment</button>
           </div>
       );
   }
   

   • Тестирование: Проверяем, что при нажатии на кнопку счетчик увеличивается на 1.

3. Функции, манипулирующие данными: Это функции, которые преобразуют или фильтруют данные.

   function filterActiveUsers(users) {
       return users.filter(user => user.isActive);
   }
   

   • Тестирование: Проверяем, что функция возвращает только активных пользователей.

4. Утилитарные функции: Это небольшие функции, которые выполняют общие задачи, такие как форматирование дат или валют.

   function formatCurrency(amount) {
       return `$${amount.toFixed(2)}`;
   }
   

   • Тестирование: Проверяем, что функция правильно форматирует числа в валюту.

Пример теста

Рассмотрим пример теста для функции calculateDiscount с использованием библиотеки Jest.

test('calculates discount for members', () => {
    const price = 100;
    const isMember = true;
    const discountedPrice = calculateDiscount(price, isMember);
    expect(discountedPrice).toBe(90); // Ожидаемая цена со скидкой
});
​
test('returns original price for non-members', () => {
    const price = 100;
    const isMember = false;
    const discountedPrice = calculateDiscount(price, isMember);
    expect(discountedPrice).toBe(100); // Ожидаемая цена без скидки
});

• test: Функция, определяющая тестовый случай.
• expect: Функция, которая проверяет, соответствует ли результат ожиданиям.
• toBe: Метод, который сравнивает фактическое значение с ожидаемым.

Unit-тесты на фронтенде помогают поддерживать высокое качество кода, упрощают процесс разработки и делают приложение более надежным.