CSS анимации мокирование

Тестирование компонентов React, которые используют CSS анимации, может представлять определённые сложности. Зачастую нам не нужно проверять саму анимацию, её длительность или точные визуальные эффекты. Однако важно удостовериться, что анимации правильно применяются, что классы и стили изменяются в нужные моменты, а поведение компонентов соответствует ожиданиям. В таких случаях React Testing Library (RTL) в сочетании с мокированием или слежением за применением стилей может быть полезным инструментом для достижения нужного результата.

Проблемы с тестированием CSS анимаций

CSS анимации, как правило, происходят асинхронно, и их эффект может быть неочевиден без визуального наблюдения. В тестах важно понимать, что процесс анимации может занять несколько секунд, что делает синхронное тестирование сложным. Более того, если тестировать компоненты с анимациями напрямую, это может потребовать множества дополнительных настроек, как, например, ожидание времени анимации или отслеживание её состояния, что может значительно усложнить тестовый код.

Задача тестировщика – минимизировать эти проблемы, чтобы фокусироваться на поведении компонента и его взаимодействии с пользователем, а не на самой анимации.

Мокирование анимаций

Одним из методов упрощения тестов с анимациями является мокирование или изоляция анимационных эффектов. Мокирование анимации позволяет избежать длительных задержек и делает тесты более стабильными и быстрыми. Важно отметить, что при мокировании не тестируется сама анимация, а проверяется только её триггер, изменение классов и поведения.

Мокирование с использованием Jest

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

// Мокируем requestAnimationFrame
beforeAll(() => {
  global.requestAnimationFrame = jest.fn((cb) => cb());
});

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

Мокирование CSS свойств

Если компонент меняет свои стили через классы CSS, можно мокировать их с помощью инструментов, таких как jest-styled-components или @testing-library/react. Для этого не нужно выполнять саму анимацию, достаточно проверить, был ли изменён нужный класс или стиль.

Пример мокирования и проверки применения класса в компоненте:

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('класс анимации применяется корректно', () => {
  render(<MyComponent />);
  
  const element = screen.getByTestId('animated-element');
  
  expect(element).toHaveClass('fade-in');
});

В этом примере тест проверяет, что при рендере компонента к элементу применяется класс fade-in, что сигнализирует о запуске анимации. Тест не ожидает завершения анимации, а только проверяет факт применения класса.

Использование act() для синхронизации

React Testing Library использует метод act() для синхронизации тестов, чтобы гарантировать, что все асинхронные операции завершены перед утверждениями. Это также касается случаев, когда компонент изменяет стили или классы через анимации.

import { render, screen, act } from '@testing-library/react';
import MyComponent from './MyComponent';

test('анимированный элемент должен появиться через время', async () => {
  render(<MyComponent />);

  const element = screen.getByTestId('animated-element');
  
  // Используем act для ожидания изменений
  await act(async () => {
    jest.advanceTimersByTime(1000); // ускоряем таймеры
  });

  expect(element).toHaveClass('fade-in');
});

В этом тесте используется jest.advanceTimersByTime, чтобы имитировать прохождение времени и проверить, что элемент получил нужный класс после задержки, как это происходит при анимации.

Тестирование состояния до и после анимации

Важно, чтобы компонент корректно реагировал на изменение состояния до и после анимации. Для этого часто достаточно проверить, меняются ли классы или стили, которые отвечают за внешний вид анимационного эффекта.

import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';

test('проверка перехода состояния до и после анимации', () => {
  render(<MyComponent />);

  const element = screen.getByTestId('animated-element');
  
  // Сначала элемент не должен иметь класс анимации
  expect(element).not.toHaveClass('fade-in');

  fireEvent.click(screen.getByText('Trigger Animation'));

  // После клика элемент должен получить класс анимации
  expect(element).toHaveClass('fade-in');
});

Этот тест проверяет, что класс анимации появляется на элементе только после определённого события, например, клика.

Синхронизация с реальными анимациями

В некоторых случаях тестирование может требовать реального воспроизведения анимаций, например, для проверки их времени или плавности. В таких ситуациях можно использовать библиотеки для мокирования временных зависимостей, такие как mocked-timing-functions, чтобы ускорить тесты.

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';
import { advanceTimersByTime } from 'mocked-timing-functions';

test('анимированное изменение происходит за отведённое время', () => {
  render(<MyComponent />);
  
  const element = screen.getByTestId('animated-element');
  
  advanceTimersByTime(1000);  // Ускоряем анимацию
  
  expect(element).toHaveClass('fade-in');
});

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

Заключение

Тестирование компонентов с CSS анимациями в React не требует проверки самих визуальных эффектов. Вместо этого, тесты фокусируются на логике изменения классов, стилей и поведения. Использование мокирования анимаций и временных функций помогает избежать ненужных задержек и делает тесты стабильными и быстрыми. Основной задачей является не то, чтобы “увидеть” анимацию, а то, чтобы гарантировать, что компонент правильно взаимодействует с пользователем и изменяет состояние в нужный момент.

Оглавление