Зрозуміти важливість автоматизованого тестування у великих проектах. Написати перший модульний тест (Unit Test) за допомогою фреймворку Vitest (аналог Jest) для перевірки логіки підрахунку ціни кошика. Познайомитися з E2E тестуванням (End-to-End) за допомогою Cypress для симуляції дій користувача.
vitest для React-додатку створеного на базі Vite.calculateTotal у окрему “чисту” функцію.Увага: На цьому етапі ви дізнаєтесь, як гарантувати, що ваш код “TechShop” не зламається (не регресує) при додаванні нових фіч іншими програмістами. Ми навчимо комп’ютер перевіряти наш код автоматично.
Vitest:
techshop.npm install -D vitest
package.json додайте команду для запуску:
"scripts": {
"dev": "vite",
// ...інші команди
"test": "vitest"
}
src/utils і всередині файл cartUtils.js.Напишіть “чисту” функцію (яка ні від чого не залежить, тільки від вхідних параметрів):
// src/utils/cartUtils.js
export function calculateTotalAmount(cartArray) {
if (!cartArray || cartArray.length === 0) return 0;
return cartArray.reduce(
(total, item) => total + item.price * item.quantity,
0,
);
}
src/__tests__) створіть файл із суфіксом .test.js, наприклад cartUtils.test.js.Напишіть тест (читається як англійський текст):
// src/utils/cartUtils.test.js
import { expect, test, describe } from "vitest";
import { calculateTotalAmount } from "./cartUtils";
describe("Функція підрахунку корзини (calculateTotalAmount)", () => {
test("Повинна повертати 0 для порожнього кошика", () => {
const emptyCart = [];
const result = calculateTotalAmount(emptyCart);
expect(result).toBe(0); // "Я очікую, що результат буде 0"
});
test("Повинна правильно рахувати суму товарів (враховуючи кількість)", () => {
// 1. Arrange (Готуємо дані)
const mockCart = [
{ id: 1, price: 100, quantity: 2 }, // Сума: 200
{ id: 2, price: 50, quantity: 1 }, // Сума: 50
];
// 2. Act (Виконуємо дію)
const result = calculateTotalAmount(mockCart);
// 3. Assert (Перевіряємо результат)
expect(result).toBe(250); // "Я очікую, що результат буде рівно 250"
});
});
npm run test.✓ Повинна повертати 0 та ✓ Повинна правильно рахувати.... Тепер, якщо хтось випадково зламає формулу + на - у вашому файлі cartUtils.js, цей тест засвітиться червоним екраном перш ніж помилка дійде до клієнта у продакшен!git add . та git commit -m "Add unit tests for cart calculation logic using Vitest".Ви познайомилися зі світом QA (забезпечення якості). Це — невід’ємна частина всіх великих IT-продуктів (Senior Software Development). Ви зрозуміли концепцію TDD (Test Driven Development) і структуру “Arrange-Act-Assert”.
describe та it / test у синтаксисі тестуючих бібліотек (Jest / Vitest)? Нащо вони потрібні?