Тестирование фронтенда — сложная задача, поэтому создатели фреймворков всячески пытаются её упростить. React в этом плане, как кажется, продвинулся дальше всех, и не последнюю роль здесь сыграло то, что тестовый фреймворк jest
также разрабатывался Facebook. Соответственно, уровень поддержки фронтенд-тестирования и конкретно React крайне высок.
JSDOM
jsdom - реализация DOM API на чистом JS для использования в Node.js. Основной целью библиотеки является эмуляция подмножества функций браузера, достаточных для тестирования и парсинга сайтов. jsdom встроен в jest и не требует абсолютно никакой настройки. В этом легко убедиться, если открыть тесты Хекслета в любой практике, работающей с браузером. С точки зрения использования это выглядит так, что прямо в тесте у нас доступен document
и window
.
test('normalize', () => {
const expected = '<p class="row">Text</p>'
document.documentElement.innerHTML = expected
normalize(document)
expect(document.body.innerHTML).toEqual(expected)
})
Возникает вопрос: зачем использовать jsdom, когда есть драйверы, работающие с настоящими браузерами. Ответов несколько:
- Скорость работы jsdom значительно выше, что не удивительно, ведь это просто библиотека на JS (к тому же, headless), в отличие от браузера.
- jsdom потребляет значительно меньше памяти для работы.
- Самое главное: jsdom и код тестируемого приложения работают в рамках одного интерпретатора Node.js. На практике это приводит к тому, что любые ошибки внутри кода приложения будут проявляться с возникновением исключения и отображением трассировки стека (стектрейса). Такое поведение значительно облегчает отладку.
Единственный серьёзный недостаток (он же и плюс) заключается в том, что jsdom — это не браузер. Другими словами, тесты на jsdom могут вполне работать, а код в браузере нет, и наоборот. Кроме того, jsdom сильно отстаёт в развитии от тех же браузеров. Новые фичи в нем появляются сильно позже, да и старые работают не все. Во многом эта проблема нивелируется использованием полифилов, но если вы используете что-то уж совсем экзотическое, то, возможно, придётся отказаться. В целом можно сказать, что с этим всем можно жить и полифилы действительно спасают.
react-test-renderer
Так как React генерирует виртуальный DOM, этим можно воспользоваться. Пакет react-test-renderer
предоставляет возможность отрендерить компонент React без необходимости взаимодействия с браузером.
import reactTestRenderer from 'react-test-renderer'
const renderer = reactTestRenderer.create(
<a href="https://www.facebook.com/">Facebook</a>,
)
console.log(renderer.toJSON())
// { type: 'a',
// props: { href: 'https://www.facebook.com/' },
// children: [ 'Facebook' ] }
С этим пакетом легко использовать снепшот тестирование в Jest. Достаточно передать в expect
результат вызова функции toJSON
.
react-testing-library
Библиотека для полноценного тестирования приложений на React, главной идеей которой является игнорирование деталей реализации компонентов и тестирование приложения так, как это делал бы реальный пользователь. Библиотека использует внутри jsdom и широко применяется в тестах здесь, на Хекслете:
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
test('TodoBox 1', async () => {
render(<TodoBox />)
const input = screen.getByRole('textbox')
const submitBtn = screen.getByRole('button', { name: 'add' })
userEvent.type(input, 'new task')
userEvent.click(submitBtn)
expect(await screen.findByRole('link', { name: 'new task' })).toBeInTheDocument()
})
Тема тестирования фронтенда слишком обширна, чтобы осветить её в рамках урока. Для более глубокого погружения рекомендуем интенсив "Тестирование фронтенда"
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.