Тести компонентів React за допомогою Vitest та Testing Library

Vitest — це швидкий тест-запускач, створений спеціально для Vite, який здасться знайомим тим, хто користується Jest, а також чудово поєднується з React Testing Library для тестування поведінки компонентів. У цьому посібнику розглядається налаштування, практичний цикл «червоний-зелений», структура файлів та способи інструктування штучного інтелекту-кодувальника, щоб він допомагав, а не створював проблеми.

1. Налаштування проекту

Встановіть стандартний набір інструментів для тестування React як залежності розробки:

npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event

Для проекту Vite React необхідно повідомити Vitest про структуру додатку у файлі vite.config.ts, щоб псевдоніми та плагіни відповідали версіям для продакшену:

For a Vite React project, add Vitest to vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    setupFiles: ['./src/test/setup.ts'],
    globals: true,
  },
})

environment: 'jsdom' забезпечує доступ до API DOM без реального браузера. Невеликий файл налаштувань реєструє мачери jest-dom один раз для кожної серії тестів:

import '@testing-library/jest-dom/vitest'

Передайте цей файл через опцію setupFiles у Vitest, щоб твердження на кшталт toBeInTheDocument та toHaveAccessibleName працювали скрізь.

2. Рекомендований процес роботи

Використовуйте жорсткий цикл: Функціональність → Тестування → Реалізація → Перевірка → Рефакторинг.

1. Зрозумійте функціональність — складіть список поведінки, видимої для користувача, та важливих станів (завантаження, успіх, помилка, порожній стан, вимкнений стан). Відзначте межі API чи браузера, які потребують імітації, щоб тести залишалися детерміністичними.
2. Спочатку напишіть тест — віддавайте перевагу запитам з React Testing Library; перевіряйте результати, які помічає користувач, а не приватний стан; використовуйте userEvent для імітації кліків та введення тексту з метою реалізму.

Впроваджуйте мінімум — зосередьтесь на коді для продакшну так, щоб він задовольняв вимоги несправних тестів; уникайте елементів, призначених лише для тестування, чи витоків внутрішніх деталей, якщо не існує кращого рішення.

Виконуйте цільові тести під час ітерацій, щоб зворотний зв’язок надходив за секунди, а не хвилини:

npx vitest run src/components/Button.test.tsx

During development:

Режим спостереження для локального циклу зворотного зв’язку:

npx vitest

Run the full suite

Повний набір тестів через скрипт npm, який визначений у вашому package.json:

npm test

або одноразове виконання у стилі CI без функції спостереження:

npx vitest run

Check coverage when appropriate

Аналіз охоплення для виявлення неперевірених гілок:

npx vitest run --coverage

Розглядайте показник охоплення як орієнтир, а не як красиву цифру — віддавайте перевагу змістовним твердженням перед прагненням до 100%.

3. Структура тестів

Розміщуйте тести поруч із компонентами, які вони захищають:

src/
├── components/
│   ├── LoginForm.tsx
│   └── LoginForm.test.tsx
├── hooks/
│   ├── useUser.ts
│   └── useUser.test.ts
├── pages/
│   ├── Dashboard.tsx
│   └── Dashboard.test.tsx
└── test/
    ├── setup.ts
    └── mocks/

For a component, structure tests around behavior:

Складайте сценарії навколо результатів роботи користувача, а не навколо назв методів:

describe('LoginForm', () => {
  it('allows a user to submit valid credentials', async () => {
    // arrange
    // act
    // assert
  })

  it('shows validation errors for invalid input', async () => {
    // ...
  })  it('disables submission while logging in', async () => {
    // ...
  })
})

Описуйте успішний сценарій, помилки валідації, а також стани «вимкнено» чи «завантаження» у окремих блоках it. Коли щось ламається, заголовок помилки має вказувати на конкретну поведінку. Використовуйте допоміжні функції обережно; чітко зрозуміла дубльована налаштування краща, ніж хитромудрі фікстури, які приховують суть.

4. Робота з AI-агентом для кодування

4. Vitest-agent prompt

Інструктуйте агента як досвідченого інженера з тестування React: спочатку напишіть або оновіть несправний тест, внесіть найменші зміни, а потім перевірте їх за допомогою Vitest та здійсніть перевірку типів:

npx vitest run <target-test>
npx vitest run
npm run typecheck
npm run lint

Попросіть його віддавати перевагу запитам Testing Library (getByRole, findByText) замість нестабільних CSS-селекторів, імітувати межі мережі замість того, щоб звертатися до стану компонента, а також залишати коротку примітку, коли тест описує навмисну обмеженість продукту.

Звички завершення роботи

Зберігайте конфігурацію Vitest у спільному доступі з Vite, щоб шляхи та плагіни відповідали режиму продакшну. У CI використовуйте run, а локально — спостерігайте за процесом. Розширюйте набори тестів у міру додавання функцій, а не шляхом масштабної переробки. Завдяки цьому циклу — спочатку тест, потім реалізація, після цього перевірка — React-додатки залишаються підходящими для рефакторингу, не уповільнюючи швидкий цикл зворотного зв’язку, який спочатку зробив Vitest привабливим.