Одна из проблем написания тестов React - знать, на каком этапе жизненного цикла компонента вы находитесь. Компонент установлен? В процессе обновления состояния? Получил ли он реквизит? Ответ на эти вопросы определяет, что должен утверждать тестировщик. Через коллегу по работе я недавно обнаружил, что React 16.9
включает act
функцию, которая может принимать async
обратный вызов.
Однако сам act
- что означает шаблон тестирования Arrange-Act-Assert - существовал задолго до 16.9
и позволяет гарантировать, что все обновления состояния завершены, прежде чем делать утверждения для компонента. Из документации:
При написании тестов пользовательского интерфейса такие задачи, как отрисовка, пользовательские события или выборка данных, можно рассматривать как «единицы» взаимодействия с пользовательским интерфейсом. React предоставляет помощник под названием act (), который гарантирует, что все обновления, связанные с этими «модулями», были обработаны и применены к DOM, прежде чем вы сделаете какие-либо утверждения…
Я рекомендую вышеупомянутую страницу рецептов тестирования для полного ознакомления с act
примерами, а также с примерами Сунила Пая - Сунил изначально был автором PR, который добавил async
act
. В этом сообщении в блоге я хочу пройти простой пример, который покажет потенциальную ценность этой утилиты для тестирования.
Примечание - все приведенные ниже примеры можно найти в этой CodeSandbox
Начнем с синхронизации act
. Рассмотрим компонент с вызовом useEffect
, который устанавливает значение для компонента:
Разница между использованием act
и неиспользованием act
заключается в том, что тест ожидает обратного вызова внутри useEffect
:
async
act - опять же, недавно выпущенный в React 16.9
- позволяет дождаться выполнения обещаний и завершения обновлений состояния.
Вот как может выглядеть асинхронный компонент…
… И различия между синхронизацией и асинхронностью act
.
Важно отметить, что enzyme
и react-testing-library
уже втягивают act
в свой API и имеют средства доступа к нему (или должны иметь в будущем), поэтому, если вы используете любую из библиотек, указанный выше шаблон не нужен. Тем не менее, я счел полезным выполнить это упражнение, чтобы понять, как работает act
.
Я очень рад, что React предлагает эту утилиту - она чрезвычайно полезна для исправления таких вещей, как периодически завершающиеся сбои тестов, которые зависят от обещаний, выполняемых за определенный фиксированный промежуток времени (которые, надеюсь, никогда не существовали в вашем наборе тестов). Тестирование React заставляет вас понять жизненный цикл ваших компонентов и то, как они обрабатывают состояние. act
- отличный способ улучшить это понимание.
Первоначально опубликовано на http://benbrostoff.github.io 11 августа 2019 г.