0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Тестирование фронтенда - сложная задача, поэтому создатели фреймворков всячески пытаются её упростить. React в этом плане, как кажется, продвинулся дальше всех, и не последнюю роль здесь сыграло то, что тестовый фреймворк jest также разрабатывался Facebook. Соответственно, уровень поддержки фронтенд-тестирования и конкретно React крайне высок.</p>
1
<p>Тестирование фронтенда - сложная задача, поэтому создатели фреймворков всячески пытаются её упростить. React в этом плане, как кажется, продвинулся дальше всех, и не последнюю роль здесь сыграло то, что тестовый фреймворк jest также разрабатывался Facebook. Соответственно, уровень поддержки фронтенд-тестирования и конкретно React крайне высок.</p>
2
<h2>JSDOM</h2>
2
<h2>JSDOM</h2>
3
<p><em>jsdom</em>- реализация DOM API на чистом JS для использования в Node.js. Основной целью библиотеки является эмуляция подмножества функций браузера, достаточных для тестирования и парсинга сайтов.<em>jsdom</em>встроен в<em>jest</em>и не требует абсолютно никакой настройки. В этом легко убедиться, если открыть тесты Хекслета в любой практике, работающей с браузером. С точки зрения использования это выглядит так, что прямо в тесте у нас доступен document и window.</p>
3
<p><em>jsdom</em>- реализация DOM API на чистом JS для использования в Node.js. Основной целью библиотеки является эмуляция подмножества функций браузера, достаточных для тестирования и парсинга сайтов.<em>jsdom</em>встроен в<em>jest</em>и не требует абсолютно никакой настройки. В этом легко убедиться, если открыть тесты Хекслета в любой практике, работающей с браузером. С точки зрения использования это выглядит так, что прямо в тесте у нас доступен document и window.</p>
4
<p>Возникает вопрос: зачем использовать<em>jsdom</em>, когда есть драйверы, работающие с настоящими браузерами. Ответов несколько:</p>
4
<p>Возникает вопрос: зачем использовать<em>jsdom</em>, когда есть драйверы, работающие с настоящими браузерами. Ответов несколько:</p>
5
<ol><li>Скорость работы jsdom значительно выше, что не удивительно, ведь это просто библиотека на JS (к тому же, headless), в отличие от браузера.</li>
5
<ol><li>Скорость работы jsdom значительно выше, что не удивительно, ведь это просто библиотека на JS (к тому же, headless), в отличие от браузера.</li>
6
<li>jsdom потребляет значительно меньше памяти для работы.</li>
6
<li>jsdom потребляет значительно меньше памяти для работы.</li>
7
<li>Самое главное: jsdom и код тестируемого приложения работают в рамках одного интерпретатора Node.js. На практике это приводит к тому, что любые ошибки внутри кода приложения будут проявляться с возникновением исключения и отображением трассировки стека (стектрейса). Такое поведение значительно облегчает отладку.</li>
7
<li>Самое главное: jsdom и код тестируемого приложения работают в рамках одного интерпретатора Node.js. На практике это приводит к тому, что любые ошибки внутри кода приложения будут проявляться с возникновением исключения и отображением трассировки стека (стектрейса). Такое поведение значительно облегчает отладку.</li>
8
</ol><p>Единственный серьёзный недостаток (он же и плюс) заключается в том, что jsdom - это не браузер. Другими словами, тесты на jsdom могут вполне работать, а код в браузере нет, и наоборот. Кроме того, jsdom сильно отстаёт в развитии от тех же браузеров. Новые фичи в нем появляются сильно позже, да и старые работают не все. Во многом эта проблема нивелируется использованием полифилов, но если вы используете что-то уж совсем экзотическое, то, возможно, придётся отказаться. В целом можно сказать, что с этим всем можно жить и полифилы действительно спасают.</p>
8
</ol><p>Единственный серьёзный недостаток (он же и плюс) заключается в том, что jsdom - это не браузер. Другими словами, тесты на jsdom могут вполне работать, а код в браузере нет, и наоборот. Кроме того, jsdom сильно отстаёт в развитии от тех же браузеров. Новые фичи в нем появляются сильно позже, да и старые работают не все. Во многом эта проблема нивелируется использованием полифилов, но если вы используете что-то уж совсем экзотическое, то, возможно, придётся отказаться. В целом можно сказать, что с этим всем можно жить и полифилы действительно спасают.</p>
9
<h2>react-test-renderer</h2>
9
<h2>react-test-renderer</h2>
10
<p>Так как React генерирует виртуальный DOM, этим можно воспользоваться. Пакет react-test-renderer предоставляет возможность отрендерить компонент React без необходимости взаимодействия с браузером.</p>
10
<p>Так как React генерирует виртуальный DOM, этим можно воспользоваться. Пакет react-test-renderer предоставляет возможность отрендерить компонент React без необходимости взаимодействия с браузером.</p>
11
<p>С этим пакетом легко использовать снепшот тестирование в Jest. Достаточно передать в expect результат вызова функции toJSON.</p>
11
<p>С этим пакетом легко использовать снепшот тестирование в Jest. Достаточно передать в expect результат вызова функции toJSON.</p>
12
<h2>react-testing-library</h2>
12
<h2>react-testing-library</h2>
13
<p>Библиотека для полноценного тестирования приложений на React, главной идеей которой является игнорирование деталей реализации компонентов и тестирование приложения так, как это делал бы реальный пользователь. Библиотека использует внутри<em>jsdom</em>и широко применяется в тестах здесь, на Хекслете:</p>
13
<p>Библиотека для полноценного тестирования приложений на React, главной идеей которой является игнорирование деталей реализации компонентов и тестирование приложения так, как это делал бы реальный пользователь. Библиотека использует внутри<em>jsdom</em>и широко применяется в тестах здесь, на Хекслете:</p>
14
<p>Тема тестирования фронтенда слишком обширна, чтобы осветить её в рамках урока. Для более глубокого погружения рекомендуем интенсив<a>"Тестирование фронтенда"</a></p>
14
<p>Тема тестирования фронтенда слишком обширна, чтобы осветить её в рамках урока. Для более глубокого погружения рекомендуем интенсив<a>"Тестирование фронтенда"</a></p>