1. Установите Jest и Enzyme, выполнив в терминале следующую команду:
npm install --save-dev jest enzyme enzyme-adapter-react-16

2. Создайте файл setupTests.js в корневом каталоге вашего проекта и добавьте следующий код:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

3. В файле package.json добавьте следующий скрипт:

"scripts": {
  "test": "jest"
}

Это позволит вам запускать тесты, запустив npm test в терминале.

Написание эффективных тестов

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

2. Напишите тест для каждого из этих состояний. Тест должен состоять из следующего:

  • Настройка начального состояния компонента
  • Создание утверждения о поведении или выводе компонента
  • Запуск события (например, нажатие кнопки) для изменения состояния компонента
  • Создание нового утверждения о поведении или выводе компонента.

3. Используйте функцию shallow от Enzyme, чтобы создать поверхностную визуализацию вашего компонента. Это позволяет вам тестировать компонент изолированно, без рендеринга каких-либо его дочерних элементов.

4. Используйте функцию find, чтобы найти определенные элементы в неглубокой визуализации. Например, если вы хотите проверить текст кнопки, вы можете использовать wrapper.find('button').text(), чтобы получить текст кнопки.

5. Используйте функцию simulate, чтобы инициировать события для элементов в мелком рендеринге. Например, вы можете использовать wrapper.find('button').simulate('click') для имитации нажатия кнопки.

6. Сделайте утверждения о поведении компонента или выходе, используя функцию Jest expect. Например, вы можете использовать expect(wrapper.find('button').text()).toBe('Submit'), чтобы убедиться, что текст кнопки «Отправить».

Дополнительные советы

  • Избегайте тестирования деталей реализации ваших компонентов, таких как конкретные применяемые классы CSS. Вместо этого сосредоточьтесь на тестировании поведения и вывода компонента.
  • Пусть ваши тесты будут небольшими и целенаправленными. Каждый тест должен проверять только одну вещь.
  • Используйте описательные имена для своих тестовых функций, чтобы было понятно, что делает каждый тест.

Я надеюсь, что это руководство поможет вам начать тестирование компонентов React! Дайте знать, если у вас появятся вопросы.