Ошибка 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. 🎉

Полезные материалы

1. GitHub – testing-library/jest-dom: Custom jest matchers to test the state of the DOM — Погрузитесь в подробности изучения матчера toBeInTheDocument() при тестировании React.
2. About Queries | Testing Library — Узнайте больше о запросах React Testing Library.
3. Configuring Jest · Jest — Настроите Jest под ваш JavaScript проект.
4. Testing React Apps · Jest — Познакомьтесь с официальным руководством Jest по тестированию React-приложений.
5. Using Matchers · Jest — Исследуйте использование jest-dom матчеров, включая функцию toBeInTheDocument().
6. Common mistakes with React Testing Library — Избегайте распространенных ошибок при работе с React Testing Library.
7. React Testing Library | Testing Library — Следуйте инструкциям для установки React Testing Library и jest-dom, соблюдая лучшие практики.