Визуальное тестирование в Jest: как добавить скриншот-тесты в набор тестов

Зачем нужны визуальные скриншот-тесты?

Ваш набор тестов Jest проходит успешно, ваш код чист и организован, но при деплое пользователи сталкиваются с поломанным макетом, который ваш набор тестов не смог обнаружить. Визуальные регрессии manages проскальзывать через юнит-тесты. Кнопка сдвинулась на 10 пикселей, цвет изменился, текст переполнен. Ни одно из этих изменений не нарушает утверждения, но они нарушают пользовательский опыт. Jest тестирует, что делает код, но не тестирует, как выглядит код.

Проблема: Jest-тесты не обнаруживают визуальные регрессии

Юнит-тесты хорошо подходят для логики, но они не могут обнаружить визуальные проблемы. Например, следующий тест проходит успешно, но не проверяет, как выглядит кнопка:

test('checkout button is clickable', () => {
  const { getByRole } = render(<CheckoutButton />);
  const button = getByRole('button');
  expect(button).toBeInTheDocument();
});

Этот тест пройден успешно, кнопка существует, но тест не знает, выглядит ли кнопка сломанной. Визуальные ошибки, которые проскальзывают через такие тесты, включают удаление свойства CSS, изменение точек разрыва flexbox, поломку градиента цвета, изменение размера шрифта, сдвиг сеточного макета.

Решение: сравнение скриншотов

Чтобы обнаружить визуальные регрессии, можно использовать скриншот-тесты. Сделайте скриншот вашего приложения, сравните его пиксель за пикселем с базовым изображением, и если разница превышает заданный порог, тест fails. Для этого можно использовать следующие шаги:

1. Сделайте скриншот вашего приложения.
2. Сравните его с базовым изображением.
3. Если разница превышает заданный порог, тест fails.

Пример кода для визуального регрессионного теста:

import { test, expect } from '@jest/globals';
import { spawn } from 'child_process';
import * as fs from 'fs';

async function takeScreenshot(url, filename) {
  const response = await fetch('https://api.pagebolt.dev/v1/screenshot', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer YOUR_API_KEY`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      url: url,
      format: 'png',
      width: 1280,
      height: 720
    })
  });

  if (!response.ok) {
    throw new Error(`Screenshot failed`);
  }

  const screenshot = await response.buffer();
  fs.writeFileSync(filename, screenshot);
}

test('visual regression test', async () => {
  const url = 'https://example.com';
  const filename = 'screenshot.png';
  await takeScreenshot(url, filename);

  // сравните скриншот с базовым изображением
  const baseline = fs.readFileSync('baseline.png');
  const screenshot = fs.readFileSync(filename);

  // если разница превышает заданный порог, тест fails
  if (compareImages(baseline, screenshot) > 0.1) {
    throw new Error(`Visual regression detected`);
  }
});

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