Проверка классов CSS на элементе

В процессе тестирования React-компонентов с использованием React Testing Library часто возникает необходимость проверки классов CSS, которые применяются к элементам. Это важно для уверенности в том, что стили корректно применяются в зависимости от состояния компонента или его взаимодействия с пользователем. Проверка классов CSS помогает убедиться, что визуальная часть приложения работает должным образом и соответствует ожидаемым результатам.

Как проверить классы с React Testing Library

React Testing Library в первую очередь ориентирована на тестирование поведения компонентов с точки зрения пользователя, а не на внутренние детали реализации. Однако проверка классов CSS является важной частью этого подхода, так как они влияют на внешний вид и взаимодействие пользователя с компонентом.

Для того чтобы проверить классы, можно использовать несколько основных методов, предоставляемых React Testing Library и DOM API.

1. Проверка с использованием getByTestId

Один из простых способов проверки наличия и корректности классов CSS — это использование атрибута data-testid. Этот атрибут позволяет выделить элемент в DOM, который можно будет легко найти для проверки.

<button data-testid="submit-button" className="btn-primary">Submit</button>

Для того чтобы проверить класс этого элемента, можно воспользоваться следующим тестом:

import { render } from '@testing-library/react';
import '@testing-library/jest-dom';

test('кнопка имеет класс btn-primary', () => {
  const { getByTestId } = render(<button data-testid="submit-button" className="btn-primary">Submit</button>);
  
  const button = getByTestId('submit-button');
  expect(button).toHaveClass('btn-primary');
});

Этот тест проверяет, что на кнопке присутствует класс btn-primary.

2. Проверка классов с использованием getByRole

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

<button role="button" className="btn-primary">Submit</button>

Тест для проверки класса через роль будет выглядеть так:

import { render } from '@testing-library/react';
import '@testing-library/jest-dom';

test('кнопка имеет класс btn-primary', () => {
  const { getByRole } = render(<button role="button" className="btn-primary">Submit</button>);
  
  const button = getByRole('button');
  expect(button).toHaveClass('btn-primary');
});

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

3. Проверка с использованием container и querySelector

Если необходимо получить доступ к элементу на более низком уровне или проверять класс элемента в сложных DOM-структурах, можно использовать container и querySelector. Этот метод дает больше гибкости и контроля при выборке элементов.

const { container } = render(<div><button className="btn-primary">Submit</button></div>);

const button = container.querySelector('button');
expect(button).toHaveClass('btn-primary');

Здесь container предоставляет доступ к полному DOM-дереву, в котором можно искать элементы с помощью методов, аналогичных тем, что предоставляет обычный DOM.

Тестирование классов с изменениями состояния

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

Пример: изменение класса при клике

Допустим, есть компонент, который меняет свой класс при клике.

function ToggleButton() {
  const [active, setActive] = React.useState(false);
  return (
    <button
      className={active ? 'btn-active' : 'btn-inactive'}
      onCl ick={() => setActive(!active)}
    >
      Toggle
    </button>
  );
}

Тест для проверки смены классов при клике будет выглядеть следующим образом:

import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import ToggleButton from './ToggleButton';

test('кнопка меняет класс при клике', () => {
  const { getByRole } = render(<ToggleButton />);

  const button = getByRole('button');
  expect(button).toHaveClass('btn-inactive');

  fireEvent.click(button);
  expect(button).toHaveClass('btn-active');

  fireEvent.click(button);
  expect(button).toHaveClass('btn-inactive');
});

В этом тесте проверяется, что класс кнопки меняется на btn-active при первом клике и возвращается обратно на btn-inactive при повторном клике. Это имитирует типичное поведение динамических компонентов, где состояние меняет внешний вид.

Проверка классов с использованием toHaveClass и дополнительных матчеров

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

  • Проверка нескольких классов:

    Можно проверять, что элемент имеет несколько классов одновременно:

    expect(button).toHaveClass('btn-primary', 'btn-active');

  • Проверка на отсутствие класса:

    Чтобы убедиться, что элемент не имеет определенного класса, можно использовать:

    expect(button).not.toHaveClass('btn-secondary');

  • Проверка частичных классов:

    В случае, если класс является динамическим или меняется в зависимости от состояния, можно проверить, что он начинается или заканчивается с определенной подстроки:

    expect(button).toHaveClass(/^btn-/); // проверяет, что класс начинается с 'btn-'

Важные моменты

  • Изменение классов динамически: Важно помнить, что классы могут изменяться динамически в ответ на действия пользователя или изменения состояния компонента. Тесты должны учитывать эти изменения и проверять, что компоненты реагируют на события корректно.
  • Стилизация и функциональность: Проверка классов — это не только проверка визуальных аспектов, но и функциональных. Например, классы могут скрывать элементы (display: none), изменять поведение при наведении или фокусе, и другие аспекты, которые напрямую влияют на пользовательский опыт.

Таким образом, проверка классов с помощью React Testing Library является важным инструментом для обеспечения того, чтобы стили и визуальные эффекты компонентов корректно функционировали в разных сценариях, соответствуя поведению, ожидаемому пользователем.

Оглавление