Среды тестирования

В этом документе рассматриваются факторы, которые могут повлиять на вашу среду, и рекомендации для некоторых сценариев.

Тестировщики

Тестировщики, такие как Jest, mocha, ava, позволяют вам писать наборы тестов как обычный JavaScript и запускать их в рамках процесса разработки. Кроме того, наборы тестов выполняются в рамках непрерывной интеграции.

• Jest широко совместим с проектами React, поддерживая такие функции, как имитация модулей и таймеров, а также jsdom поддержку. Если вы используете Create React App, Jest уже включён по умолчанию с полезными настройками.
• Библиотеки, такие как mocha, хорошо работают в реальных браузерных средах и могут быть полезны для тестов, которые явно нуждаются в этом.
• Конечные тесты используются для тестирования более длительных потоков через несколько страниц и требуют различной настройки.

Имитация поверхности отрисовки

Тесты часто выполняются в среде без доступа к реальной поверхности отрисовки, такой как браузер. Для этих сред мы рекомендуем имитировать браузер с помощью jsdom, лёгкой реализации браузера, работающей внутри Node.js.

В большинстве случаев jsdom ведет себя как обычный браузер, но не имеет таких функций, как макет и навигация. Это по-прежнему полезно для большинства тестов компонентов на основе веб-страниц, так как выполняется быстрее, чем запуск браузера для каждого теста. Он также выполняется в том же процессе, что и ваши тесты, поэтому вы можете написать код для проверки и утверждения отрисованного DOM.

Так же, как и в реальном браузере, jsdom позволяет моделировать взаимодействия пользователя; тесты могут отправлять события на узлы DOM, а затем наблюдать и подтверждать побочные эффекты этих действий (пример).

Большая часть тестов пользовательского интерфейса может быть написана с помощью вышеуказанной настройки: используя Jest в качестве тестового запуска, отрисовывая в jsdom, с указанием взаимодействий пользователя как последовательности событий браузера, с помощью act() помощника (пример). Например, многие собственные тесты React написаны с помощью этой комбинации.

Если вы пишете библиотеку, которая в основном тестирует поведение, специфичное для браузера, и требует поведения родного браузера, такого как макет или реальные входные данные, вы можете использовать фреймворк, такой как mocha.

В среде, где вы не можете смоделировать DOM (например, при тестировании компонентов React Native в Node.js), вы можете использовать помощники для имитации событий для имитации взаимодействий с элементами. В качестве альтернативы вы можете использовать fireEvent помощник из @testing-library/react-native.

Фреймворки, такие как Cypress, puppeteer и webdriver, полезны для запуска конечных тестов.

Имитация функций

При написании тестов нам хотелось бы имитировать части нашего кода, которые не имеют эквивалентов в нашей тестовой среде (например, проверка navigator.onLine состояния в Node.js). Тесты также могут следить за некоторыми функциями и наблюдать, как другие части теста взаимодействуют с ними. Тогда полезно уметь выборочно имитировать эти функции с дружественными для теста версиями.

Это особенно полезно для извлечения данных. Обычно предпочтительнее использовать «фиктивные» данные для тестов, чтобы избежать медленности и непредсказуемости, связанных с извлечением данных из реальных API-точек доступа (пример). Это помогает сделать тесты предсказуемыми. Такие библиотеки, как Jest и sinon, в числе прочих, поддерживают имитируемые функции. Для конечных тестов имитация сети может быть сложнее, но вы, возможно, захотите протестировать реальные API-точки доступа в них в любом случае.

Имитация модулей

Некоторые компоненты имеют зависимости от модулей, которые могут работать некорректно в тестовых средах или не являются необходимыми для наших тестов. Может быть полезно выборочно имитировать эти модули с подходящими заменителями (пример).

В Node.js такие запускающие программы, как Jest поддерживают имитацию модулей. Вы также можете использовать библиотеки, такие как mock-require.

Имитация таймеров

Компоненты могут использовать функции, основанные на времени, такие как setTimeout, setInterval, или Date.now. В тестовых средах полезно имитировать эти функции заменителями, которые позволяют вам вручную «продвигать» время. Это отлично подходит для обеспечения быстрого выполнения ваших тестов! Тесты, зависящие от таймеров, всё ещё будут выполняться в порядке, но быстрее (пример). Большинство фреймворков, включая Jest, sinon и lolex, позволяют имитировать таймеры в ваших тестах.

Иногда вы можете не захотеть имитировать таймеры. Например, может быть, вы тестируете анимацию или взаимодействуете с точкой доступа, чувствительной к таймингу (например, с лимитом скорости API). Библиотеки с имитациями таймеров позволяют включать и выключать их на основе каждого теста/набора тестов, так что вы можете явно выбрать, как эти тесты будут выполняться.

Конечные тесты

Конечные тесты полезны для тестирования более сложных рабочих процессов, особенно когда они критически важны для вашего бизнеса (например, платежи или регистрация). Для этих тестов вы, вероятно, захотите проверить, как реальный браузер отображает всё приложение, извлекает данные из реальных API-точек доступа, использует сессии и куки, переходит по разным ссылкам. Вы, вероятно, захотите сделать утверждения не только относительно состояния DOM, но и относительно данных поддержки (например, для проверки того, были ли обновления сохранены в базе данных).

В этом случае вы бы использовали фреймворк, такой как Cypress, Playwright или библиотеку, такую как Puppeteer, чтобы вы могли перемещаться между несколькими маршрутами и делать утверждения о побочных эффектах не только в браузере, но и, возможно, на сервере.