React + Jest: тест зависает навсегда всякий раз, когда я пытаюсь получить доступ к свойствам DOM (например, toHaveStyle)

В течение последних нескольких месяцев мои тесты работали отлично. Версии моих пакетов фиксированы, а не диапазоны, и мы не обновляли никакие зависимости. Однако с тех пор, как три дня назад тесты вообще не запускались. Jest просто висит в [RUNS] myTests/file.spec.tsx навсегда (я ждал больше 10 минут).

У меня тайм-аут установлен на 10000 мс (10 с), но даже достижение этого тайм-аута не приведет к сбою теста. Как будто он застрял, даже не начав выполнять тесты.

Это было обнаружено в конвейере CI, и после удаления node_modules и повторной локальной повторной установки это происходит и в моей локальной среде.

После некоторого устранения неполадок мне удалось воспроизвести это во вновь созданном тестовом файле, и это всегда происходит, когда я добавляю ожидание доступа к свойствам DOM, таким как toHaveStyle:

const placeholder = screen.getByTestId('floating-placeholder');

expect(placeholder).toBeInTheDocument(); // This works
expect(placeholder).toHaveStyle({ top: '13px' }); // As soon as I write this line, the tests hangs forever

Что я пробовал

Я не знаю, что делать, потому что единственное, о чем я могу думать, это версии библиотек, но мы не обновляли ни одну из наших зависимостей за последние месяцы. Кроме того, я обновил версии RTL (jest-dom, user-event и т. д.) и Jest для тестирования, и это не сработало.

Использование флага --verbose в сценарии Jest показывает, что процесс застрял в этой строке навсегда:

npm timing npm:load Completed in 42ms (число "42мс" все время меняется очень быстро, как хроно, но никогда не проходит мимо).

Я также искал изменения в библиотеках, таких как jest-dom и так далее, на случай, если какая-то другая библиотека с одноранговыми зависимостями могла бы обновить ее, но обновления также не было.

Версии системы

  • НПМ: 7.21.0
  • Узел: 16.8.0
  • @testing-library/jest-dom: 5.16.4
  • @тестовая библиотека/реакция: 13.1.1
  • @тестовая-библиотека/пользовательское-событие: 13.5.0
  • реагировать: 18.0.0
  • шутка-насмешка: 1.5.1
  • машинопись: 4.6.3
  • @типы/шутка: 29.4.0

Приложение было создано с помощью утилиты create-react-script.

Вопрос

Что я мог сделать, чтобы попытаться определить, почему он вдруг терпит неудачу?

Спасибо!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
164
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ну, я не знаю, почему он вдруг перестал работать. Я тоже не знаю, почему, это, кажется, исправляет это. Но понижение версии @testing-library/jest-dom с 5.16.4 до 5.16.3 и выполнение чистой установки, кажется, исправили это, и теперь все тесты выполняются зеленым цветом, даже в конвейере CI.

Единственным отличием журнала изменений от этих двух версий является это единственное исправление:

Поддержка незаключенного внутреннего текста для отображения элементов сведений. (#396) (af18453)

Что никак не должно повлиять на то, как ведут себя тесты с этой версией в моем проекте. Но, кажется, как-то так.

Другие вопросы по теме