Для реализации скриншотных тестов в Vite проекте вам потребуется использовать некоторые вспомогательные библиотеки и инструменты. Ниже я приведу подробную инструкцию по настройке скриншотных тестов в Vite проекте.
Шаг 1: Установка зависимостей
Первым шагом вам потребуется установить следующие зависимости:
- jest: это фреймворк для тестирования JavaScript-кода.
- puppeteer: это библиотека для управления браузером (Chrome) и создания скриншотов в тестах.
- jest-puppeteer: это дополнительное расширение для jest, которое позволяет интегрировать puppeteer в существующие тесты.
Вы можете установить эти зависимости, выполнив следующую команду:
npm install jest puppeteer jest-puppeteer --save-dev
Шаг 2: Настройка jest и puppeteer
Затем вам потребуется настроить jest и puppeteer в вашем проекте. Создайте файл jest.config.js в корне вашего проекта и добавьте следующий код:
module.exports = {
preset: 'jest-puppeteer',
testMatch: ['**/tests/**/*.js']
};
Здесь мы используем jest-puppeteer пресет и указываем, что наши тесты будут находиться в папке tests.
Шаг 3: Создание скриншотных тестов
Теперь вы можете создать скриншотные тесты в вашем проекте. Создайте папку tests в корне вашего проекта (если ее еще нет) и создайте файл screenshot.test.js внутри нее. В этом файле вы можете определить ваши тесты. Например:
describe('Example screenshot test', () => {
beforeAll(async () => {
await page.goto('http://localhost:3000'); // Здесь указывается URL вашего приложения
});
it('should match the expected screenshot', async () => {
const screenshot = await page.screenshot();
expect(screenshot).toMatchImageSnapshot();
});
});
В этом примере мы используем функцию page.goto для перехода на URL вашего приложения, а затем создаем скриншот с помощью функции page.screenshot. Затем мы сравниваем скриншот с ожидаемым результатом с помощью функции expect(...).toMatchImageSnapshot().
Шаг 4: Запуск тестов
Теперь вы можете запустить свои тесты с помощью команды jest в консоли:
npx jest
Jest автоматически найдет и запустит все тесты, которые соответствуют шаблону, указанному в testMatch в jest.config.js.
После запуска тестов jest вы увидите результаты в консоли и, если тест не прошел, jest автоматически создаст папку __image_snapshots__, в которой будет храниться ожидаемый скриншот.
Обратите внимание, что для работы puppeteer и jest вам может потребоваться настроить jest-puppeteer для сопряжения с вашими версиями браузера и Node.js.
Вот и все! Теперь вы знаете, как реализовать скриншотные тесты в вашем проекте, используя Vite, jest и puppeteer. Это очень полезный инструмент для проверки визуальных изменений в вашем приложении и обеспечения стабильности пользовательского интерфейса.