от Разработчики React @ Selleo

Самый популярный подход к тестированию компонентов React - использовать Mocha + Chai + Enzyme или Jest + Enzyme. В этой статье мы опишем наши практики тестирования компонентов React с помощью Jest + Enzyme, которые также применимы к Mocha + Chai.

Если вы новичок в тестировании компонентов React, вам следует также прочитать:

Организация испытаний

В более крупных проектах JavaScript мы помещаем тесты, близкие к реализации, в подпапку __tests__. Обычно тесты для компонента группируются по структуре, а поведение добавляется поверх него, например:

Тест минимального компонента подтверждает, что компонент визуализирован

Минимальные тесты компонентов подтверждают правильность рендеринга компонента, также известного как «дымовое тестирование» или «проверка сборки». Это можно сделать с помощью фермента:

или снимок Jest:

Последний генерирует файл __snapshots __ / MainSection.spec.js.snap.

Изменения в снимках состояния подтверждаются локально с помощью символа u в jest cli и фиксируются в репозитории git, чтобы рецензент по связям с общественностью мог их увидеть. Подробнее читайте в разделе Тестирование снимков.

На данный момент мы ограничиваем использование снимков рендерингом компонентов и сложным json (то есть конфигурациями диаграмм).

Хорошо, я тестирую рендеры - что еще мне тестировать?

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

Тесты - это автоматизированная проверка качества и документация для разработчиков. Чем крупнее проект и команда, тем более подробные тесты вам понадобятся.

Попробуйте подумать о будущем, когда вы вернетесь к этому компоненту или проведете его рефакторинг - чего вы ожидаете от тестов?

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

Давайте рассмотрим некоторые практики, которые мы считаем полезными для достижения этих целей.

Явный setup () вместо beforeEach ()

Преимущество использования явной функции setup () заключается в том, что в любом тесте ясно, как компонент был инициализирован. Объект настройки также является хорошим местом для подключения некоторых вспомогательных функций, которые взаимодействуют с оболочкой, т.е.

Тестирование поведения

Тестирование поведения на практике сводится к тестированию того, приводят ли определенные входные данные и смоделированные события к ожидаемым результатам, т.е.

Вы можете увидеть, как setup () делает написание этих тестов очень быстрым!

Используйте вспомогательные функции

Иногда нам приходится писать много похожих тестов с измененной только одной входной переменной. Это можно решить с помощью вспомогательной функции, которая генерирует тест:

Он хорошо читается, и его легче обслуживать.

Резюме

Практики, описанные в этой статье:

  • поместите тесты, близкие к реализации, в подпапку __tests__
  • всегда начинайте с простого теста рендеринга компонентов, также известного как дымовое тестирование, затем проверяйте поведение
  • подумайте о будущем, когда вы вернетесь к этому компоненту или проведете его рефакторинг
  • использовать явную настройку () и возвращать с ней общие ярлыки переменных
  • использовать вспомогательные функции, которые генерируют тесты

Мы надеемся, что эта статья оказалась для вас полезной. Вы можете найти рабочий пример кода в моей вилке кода redux todomvc по адресу https://github.com/tb/redux/tree/react-testing/examples/todomvc/src/components/__tests__