Тестування — це важливий етап розробки будь-якого фронтенд-додатку, оскільки воно дозволяє виявити помилки на ранніх етапах і запобігти їх виникненню в продакшн-версії. У цій статті ми розглянемо, як проводити тестування в React-додатках, використовуючи Vite і Vitest. Ми також розглянемо, що таке моки та стаби, їх правильне застосування та основні відмінності між ними. Окрім того, ми дізнаємось, як інструменти штучного інтелекту можуть допомогти в написанні тестів і як покращити результат за допомогою таких інструментів.
Що таке Vitest і чому його варто використовувати
Vitest — це сучасний фреймворк для тестування, який оптимізовано для роботи з Vite. Він є швидшим за Jest та краще інтегрований з інструментами, що використовують JavaScript та TypeScript. Якщо ваш проєкт вже використовує Vite, Vitest стане відмінним вибором для тестування. Оскільки Vitest працює в тому ж середовищі, що й ваш додаток, він надає швидкий зворотний зв'язок та покращує досвід розробки, дозволяючи вам стежити за змінами в реальному часі.
Чому тестування важливе для фронтенду
У фронтенд-розробці ми працюємо з багатьма компонентами, формами, введеннями від користувача, API та іншими елементами взаємодії. Навіть якщо ваш додаток працює в браузері, без належних тестів важко бути впевненим, що він буде правильно поводитися в різних ситуаціях. Тестування дозволяє перевірити такі аспекти:
- Чи працюють кнопки та чи надсилаються правильні дані.
- Чи правильно працює валідація форм.
- Чи викликаються API з правильними параметрами.
- Як система обробляє помилки, наприклад, збої в мережі.
- Чи зберігається стабільність додатку при змінах.
Що таке стуб?
Стуб — це фейкова функція, яка заміняє реальну. Вона повертає фіксоване значення, яке ви визначаєте. Стуб не записує, як і коли викликається функція, і його головна мета — просто замінити реальну логіку на просту фейкову.
Наприклад, якщо у вас є функція, що отримує дані про екзамен з сервера, але ви не хочете викликати сервер під час тестування, ви можете використати стуб, щоб він повертав фіксовані дані.
Що таке мок?
Мок схожий на стуб, але має додаткові можливості. Окрім заміни реальної функції, мок також відстежує, як саме була використана ця функція. Мок дозволяє перевірити, скільки разів була викликана функція, які аргументи були передані, і в якому порядку виконувались кілька функцій.
Моки корисні, коли ви хочете тестувати взаємодії між компонентами. Наприклад, якщо форма має викликати функцію збереження тільки після того, як усі поля заповнені, ви можете використовувати мок, щоб переконатися, що це правило дотримано.
Коли використовувати стуб, а коли мок?
- Використовуйте стуб, коли вам потрібно лише замінити значення, яке повертає функція. Якщо ви не хочете перевіряти, як саме функція була використана, це ідеальний варіант.
- Використовуйте мок, коли вам потрібно тестувати поведінку функції, зокрема, скільки разів вона була викликана і з якими параметрами.
Обидва інструменти можна використовувати в одному тесті в залежності від того, що саме ви хочете перевірити.
Як використовувати моки та стаби у Vitest
- Налаштування тестового середовища: Спочатку потрібно встановити необхідні інструменти, такі як
vitest,@testing-library/reactіjsdom. Це дозволить тестувати ваші React-компоненти віртуальному браузері.
npm install --save-dev vitest @testing-library/react jsdom
-
Думайте про компонент: Якщо ви працюєте за методологією Test-Driven Development (TDD), спочатку оберіть компонент, який ви хочете протестувати.
-
Думайте про виклики API: Виділіть логіку і виклики API в окремі файли, щоб мати можливість замокати або замінити їх під час тестування.
-
Використовуйте
vi.stubабоvi.fn: У Vitest для створення моків і стабів можна використовувати функціїvi.fn()для моків іvi.stub()для стабів.
const mockFn = vi.fn().mockReturnValue("hello");
vi.stub(global, "fetch").returns(Promise.resolve({ json: () => Promise.resolve(data) }));
- Напишіть тест: Використовуйте
@testing-library/reactдля рендерингу компонентів. Симулюйте дії користувача і перевіряйте, чи були правильно застосовані моки і стаби.
Як зробити тест корисним
Хороший тест — це не просто тест, який проходить. Це тест, який підтверджує, що ваш компонент працює так, як потрібно. Ось кілька порад:
- Тестуйте лише важливі частини коду.
- Використовуйте чіткі назви для тестів, які відображають їх суть.
- Тримайте тести короткими та зосередженими на одній функціональності.
- Очищайте моки і стаби після кожного тесту.
- Включайте тести для крайніх випадків і помилкових ситуацій.
Як ШІ допомагає писати кращі тести
Інструменти штучного інтелекту, як-от Claude, ChatGPT і GitHub Copilot, можуть значно допомогти в автоматизації створення тестів, зменшуючи час на написання шаблонного коду. Однак, важливо не покладатися повністю на ці інструменти. Ви повинні перевіряти результати тестів, аналізувати помилки і коригувати їх відповідно до вашої логіки проєкту.
Реальні приклади з моками та стабами
У своїх проєктах я часто використовую моки і стаби для тестування поведінки функцій. Наприклад, я мокую зовнішні API запити, щоб не робити реальних викликів під час тестування, що дозволяє контролювати, що саме має бути повернуто від бекенду.
const mockAxios = new MockAdapter(axios)
it('успішно виконує вхід і зберігає токени', async () => {
const mockResponse = {
accesstoken: 'test-access-token',
refreshtoken: 'test-refresh-token',
}
mockAxios
.onPost(${config.API_ADMIN_URL}/admin-auth/login/)
.reply(200, mockResponse)
const result = await loginAdmin('testuser', 'testpassword')
expect(sessionStorageMock.setItem).toHaveBeenCalledWith(
'accesstoken',
'test-access-token'
)
expect(sessionStorageMock.setItem).toHaveBeenCalledWith(
'refreshtoken',
'test-refresh-token'
)
expect(result).toEqual(mockResponse)
})
Мокування допомагає протестувати фронтенд-логіку без необхідності виконувати реальні мережеві запити, що економить час і забезпечує більшу стабільність тестів.
Перекладено з: DevOps/Cloud Infrastructure Checklist