An update to <название_компонента> inside a test was not wrapped in act
Это предупреждение возникает, когда после завершения теста React продолжает выполнять обновления компонентов. В интернете много информации на эту тему (например, здесь и здесь). Статьи по этим ссылкам, а также документация React, рекомендуют взаимодействовать с компонентами в тестах через какую-нибудь готовую библиотеку, которая обрабатывает эту особенность.
Но дело в том, что при запуске тестов мы продолжали видеть предупреждения
"... not wrapped in act", хотя на тот момент в проекте уже использовалась testing-library и обрабатывались краевые случаи, описанные в статьях. Предупреждений было очень много, несколько сотен 😱Мы стали копать дальше и нашли обсуждение на GitHub. Оказалось, что логика обработки этой ситуации в
@testing-library завязана на статический объект, создаваемый кодом библиотеки @testing-library/dom. Если в проекте содержится несколько разных версий этой библиотеки (например, установлены как транзитивные зависимости), то может оказаться, что разные вызовы API обращаются к разным экземплярам этого объекта и из-за этого они не понимают, что действие уже обернуто в act.В конфиге Jest мы настроили маппинг, чтобы при сборке все импорты из
@testing-library/dom разрешались в одну версию библиотеки (в конкретную папку в node_modules на верхнем уровне). moduleNameMapper: {
'^@testing-library/dom$': `<rootDir>/node_modules/@testing-library/dom`
}Это помогло, предупреждения исчезли. Консольный вывод модульных тестов теперь короткий и понятный 😎