Ошибка toBeInTheDocument() в react-testing-library: решение
Быстрый ответ
Если вам постоянно выдается ошибка «toBeInTheDocument()
is not a function», причиной, скорее всего, является то, что матчеры jest-dom не подключены. Чтобы устранить эту проблему, от вас требуется:
Установить
@testing-library/jest-dom
:shСкопировать кодnpm i -D @testing-library/jest-dom
Импортировать его в тестовый файл:
JSСкопировать кодimport '@testing-library/jest-dom';
Или альтернативным вариантом будет настроить глобальную загрузку в конфигурации Jest:
jsonСкопировать код"jest": { "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"] }
Выполнив данные действия, переменная Jest начнет распознавать
toBeInTheDocument()
как валидный матчер.
Глобальное применение jest-dom
Чтобы не импортировать jest-dom каждый раз при создании теста, можно настроить конфигурацию Jest или используя файл setupTest.js:
В корневой директории проекта необходимо создать
jest.config.js
:JSСкопировать кодmodule.exports = { setupFilesAfterEnv: ['<rootDir>/jest.setup.js'], };
Далее, в той же директории создаем файл
jest.setup.js
:JSСкопировать кодimport '@testing-library/jest-dom/extend-expect'; // Так мне не нужно импортировать это в каждый тест!
Использование этого подхода позволит поддерживать кодовую базу в более аккуратном состоянии и упрощает доступность необходимых матчеров при проведении тестов.
Расширьте возможности с дополнительными матчерами
Библиотека @testing-library/jest-dom
обладает способностью расширять Jest с помощью добавления специализированных матчеров для более эффективных утверждений в тестах. Из примеров можно выделить следующие:
- toHaveClass — позволяет проверить, есть ли у элемента определенные классы.
- toBeVisible — производит проверку, является ли элемент видимым для пользователя.
- toHaveAttribute — метод проверки наличия атрибута у элемента и его трактование.
Благодаря этим матчерам ваши тесты становятся более очевидными и понятными.
Конфигурация TypeScript
В случае работы с TypeScript могут потребоваться следующие настройки:
Вам потребуются типы для
@testing-library/jest-dom
:shСкопировать кодnpm i -D @types/testing-library__jest-dom
- В файле jest.config.js
preset
укажите как'ts-jest'
, что позволит обрабатывать файлы TypeScript. - Добавьте путь к файлу настройки Jest в массив
include
, используемый вашим tsconfig.
Эти действия позволят TypeScript улучшить процесс разработки, предоставив возможность автодополнения и проверку типов для матчеров.
Частые ошибки, которых стоит избегать
Некоторые проблемы могут привести к тому, что toBeInTheDocument()
не будет узнаваться. Сюда входят:
- Неверно указанный путь в
setupFilesAfterEnv
конфигурации. - Проведение испытаний до внесения правок в конфигурации или установки пакетов.
- Пропущенный импорт, в случае если вы не используете глобальные настройки Jest.
Будьте внимательны и проверьте, что эти ошибки отсутствуют, когда toBeInTheDocument()
не работает.
Визуализация
Представьте, что вы заказали пиццу (🍕), но у вас отсутствует пиццерезка (🔪):
Доступные инструменты:
| Инструмент | Наличие |
| ---------------------- | ----------- |
| Пиццерезка (🔪) | ❌ |
| ToBeInTheDocument() | ❌ |
toBeInTheDocument() по сути это отсутствующая пиццерезка; вы полагались на неё, а её почему-то нет. Без пиццерезки пиццу не разрезать; без toBeInTheDocument()
, тесты ведут себя нестабильно .
expect(element).toBeInTheDocument(); // ❌ Упс! Кажется, что-то пошло не так.
Но, мы можем все исправить:
Решение: import { screen } from '@testing-library/react'
В нашем распоряжении: | Инструмент | Наличие |
|-------------------------- | ------------ |
| Пиццерезка (🔪) + Пицца (🍕)| ✅ |
| ToBeInTheDocument() + Тесты| ✅ |
Отлично! Теперь вы во всеоружии для эффективного тестирования компонентов React. 🎉
Полезные материалы
- GitHub – testing-library/jest-dom: Custom jest matchers to test the state of the DOM — Погрузитесь в подробности изучения матчера toBeInTheDocument() при тестировании React.
- About Queries | Testing Library — Узнайте больше о запросах React Testing Library.
- Configuring Jest · Jest — Настроите Jest под ваш JavaScript проект.
- Testing React Apps · Jest — Познакомьтесь с официальным руководством Jest по тестированию React-приложений.
- Using Matchers · Jest — Исследуйте использование jest-dom матчеров, включая функцию
toBeInTheDocument()
. - Common mistakes with React Testing Library — Избегайте распространенных ошибок при работе с React Testing Library.
- React Testing Library | Testing Library — Следуйте инструкциям для установки React Testing Library и jest-dom, соблюдая лучшие практики.