Тестирование

В React по умолчанию реализовано тестирование. Файл для теста имеет имя ComponentName.test.js.

Пример файла «App.test.js» (устанавливается по умолчанию).

// App.test.js
import { render, screen } from '@testing-library/react';
import App from './App';

test('На странице имеется ссылка', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i); // искать строку "learn react"
  const linkElement = screen.getByText('learn react');  // ищет строго строку "learn react"
  expect(linkElement).toBeInTheDocument();
});

Пример выше ищет строку «learn react», и если она имеется, то она помечает, что тестирование прошло.

Запустить тестирование можно через консольную команду:

npm test

Команда ищет все файлы, имеющие суффикс «test», и показывает в консоли результат всех тестов.

Пример тестирования:

PASS src/App.test.js
  √ На странице имеется ссылка (22 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.243 s, estimated 13 s

Чтобы выйти из режима тестирования, достаточно нажать на Ctrl + C или q.

Проверить элементы по роли

Допустим есть компонент модального окна, у которого должен быть указан атрибут role="dialog". Найти элемент по роли можно через метод screen.getByRole().

// App.test.js
import { render, screen } from '@testing-library/react';
import Dialog from './Dialog';

test('Проверка атрибута role="dialog"', () => {
  render(<Dialog />);

  expect(screen.getByRole("dialog")).toBeInTheDocument();
});