Ответ
Jest-dom — это библиотека для расширения возможностей Jest, добавляющая специальные матчеры (утверждения) для тестирования DOM. Она упрощает проверку элементов в документе, делая тесты более читаемыми и выразительными.
Пример использования:
import '@testing-library/jest-dom';
test('проверка кнопки', () => {
const button = document.createElement('button');
button.disabled = true;
expect(button).toBeDisabled();
expect(button).toHaveAttribute('disabled');
});Основные преимущества:
- Специальные матчеры (
toBeVisible,toHaveClass,toHaveTextContentи др.) - Улучшенные сообщения об ошибках
- Интеграция с Testing Library
- Поддержка пользовательских матчеров
Устанавливается как dev-зависимость:
npm install --save-dev @testing-library/jest-domОтвет 18+ 🔞
А, ну вот, опять эти ваши библиотеки для тестирования! Jest-dom, говоришь? Так, сейчас разберёмся, что за зверь такой.
Смотри, есть у тебя Jest — он, конечно, молодец, но когда дело доходит до проверки, что там в браузере творится, он как-то сразу тупеет, блядь. Ты ему: «Эй, а кнопка-то активна?», а он тебе в ответ: «А чё такое „активна“? Я про такой матчер не слышал, иди нахуй». И сидишь потом, вручную проверяешь disabled атрибут, как последний лузер.
Так вот, jest-dom — это такой костыль, но охуенный, который этому Jest'у мозги вправляет. Научит его понимать, что такое DOM. Кинул ему эту библиотеку, и у тебя сразу появляется куча новых, понятных даже мартышке, проверок.
Вот смотри, как жизнь меняется:
import '@testing-library/jest-dom';
test('проверка кнопки', () => {
const button = document.createElement('button');
button.disabled = true;
expect(button).toBeDisabled(); // Вместо expect(button.disabled).toBe(true)
expect(button).toHaveAttribute('disabled'); // И это тоже проверим, на всякий ебаный случай
});Видишь разницу? Раньше бы писал expect(button.disabled).toBe(true), а теперь просто toBeDisabled(). Читается, как книга, блядь. И если что-то пойдёт не так, он тебе не какую-то хуйню в консоль вывалит, а внятно скажет: «Ожидалось, что элемент будет disabled, а он, сука, активный!».
Чем он ещё хорош, этот ваш jest-dom?
- Матчеры на любой вкус.
toBeVisible()(видим ли элемент),toHaveClass()(есть ли у него такой CSS-класс),toHaveTextContent()(а что внутри написано, не «Hello World» ли?) — в общем, всё, что душе угодно. - Сообщения об ошибках. Они не просто «expected true to be false», а человеческие, в рот меня чих-пых! Сразу видно, где косяк.
- Дружит с Testing Library. Если ты её используешь (а ты должен, ибо не мудак), то они вместе просто песенка.
- Можно свои матчеры прикрутить. Если вдруг тебе мало — ну ты понтовый, блядь.
Ставится проще простого, как dev-зависимость:
npm install --save-dev @testing-library/jest-domИ всё. Подключил в тестах и живи, как сыр в масле катаешься. В общем, вещь полезная, если, конечно, не страдаешь мазохизмом и не любишь писать километровые expect(element.querySelector('button').getAttribute('aria-hidden')).