- Установите 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
в терминале.
Написание эффективных тестов
- Начните с размышлений о различных состояниях, в которых может находиться ваш компонент. Например, если у вас есть форма входа в систему, вы можете проверить, что происходит при первом отображении формы, когда пользователь вводит неправильный пароль и когда пользователь успешно входит в систему.
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! Дайте знать, если у вас появятся вопросы.