Одна из проблем написания тестов 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 г.