Проверка встроенных стилей

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

Как Enzyme работает с DOM-элементами?

Enzyme позволяет проводить манипуляции с компонентами на уровне виртуального DOM (на основе библиотеки React). Для работы с реальным DOM существует несколько методов, среди которых наиболее популярными являются mount, shallow и render.

  • shallow — работает с поверхностной рендеризацией компонента, без глубокого погружения в дочерние элементы. Это полезно для тестирования компонентов, не зависимых от их внутренних вложенных элементов.
  • mount — полностью рендерит компонент, включая все его дочерние элементы. Это идеальный вариант, когда необходимо протестировать взаимодействие с реальным DOM, включая стили.
  • render — предоставляет статичную версию компонента в виде HTML-строки, не имея доступа к состоянию или методам компонента.

Для тестирования встроенных стилей предпочтительнее использовать mount, так как он позволяет взаимодействовать с реальным DOM, в том числе с визуальными аспектами, такими как стили.

Проверка встроенных стилей

При тестировании встроенных стилей основное внимание следует уделить следующим аспектам:

  1. Проверка значений CSS-свойств
  2. Проверка динамического изменения стилей
  3. Проверка корректности применения стилей при изменении состояний или пропсов
Пример теста для проверки значений CSS-свойств

Для того чтобы проверить стили, можно использовать методы Enzyme, такие как .find() и .prop(). Эти методы позволяют извлекать элементы и получать их стили.

Пример теста, который проверяет правильность применения встроенных стилей:

import { mount } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('проверяет корректность применения стилей', () => {
    const wrapper = mount(<MyComponent />);
    const element = wrapper.find('.my-element');
    
    // Проверяем inline-стиль
    expect(element.prop('style')).toHaveProperty('color', 'red');
  });
});

В данном примере мы проверяем, что у элемента с классом my-element стиль color равен red. Метод prop('style') возвращает объект стилей, применённых к элементу.

Проверка динамического изменения стилей

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

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

import { mount } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('проверяет изменение стилей при изменении состояния', () => {
    const wrapper = mount(<MyComponent />);
    
    // Изначальный стиль
    const element = wrapper.find('.my-element');
    expect(element.prop('style')).toHaveProperty('backgroundColor', 'blue');
    
    // Обновляем состояние компонента
    wrapper.setState({ isActive: true });
    
    // Проверяем, что стиль изменился
    expect(element.prop('style')).toHaveProperty('backgroundColor', 'green');
  });
});

Здесь компонент имеет состояние isActive, которое управляет стилем фона элемента. Изначально фон синего цвета, но после изменения состояния на true цвет фона меняется на зелёный. Важно, что метод setState() обновляет состояние компонента, а затем мы снова извлекаем стили с помощью prop('style').

Проверка использования классов CSS

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

Пример теста, который проверяет, что элемент имеет определённый класс:

import { mount } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('проверяет наличие класса при активном состоянии', () => {
    const wrapper = mount(<MyComponent />);
    const element = wrapper.find('.my-element');
    
    // Изначально класс не должен быть добавлен
    expect(element.hasClass('active')).toBe(false);
    
    // Обновляем состояние компонента
    wrapper.setState({ isActive: true });
    
    // Проверяем, что класс добавлен
    expect(element.hasClass('active')).toBe(true);
  });
});

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

Использование библиотек для работы со стилями

Enzyme в сочетании с библиотеками для тестирования стилей, такими как jest-styled-components или react-testing-library, может значительно упростить тестирование визуальной части компонентов. Эти библиотеки предоставляют дополнительные возможности для работы с CSS-in-JS решениями, что полезно для проверки динамических стилей, применённых через styled-components или другие подобные решения.

Пример использования jest-styled-components с Enzyme:

import { mount } from 'enzyme';
import styled from 'styled-components';
import 'jest-styled-components';
import MyComponent from './MyComponent';

const StyledComponent = styled.div`
  background-color: ${(props) => (props.active ? 'green' : 'blue')};
`;

describe('MyComponent', () => {
  it('проверяет динамическое изменение стиля с помощью styled-components', () => {
    const wrapper = mount(<MyComponent />);
    const element = wrapper.find(StyledComponent);
    
    // Проверяем начальный цвет фона
    expect(element).toHaveStyleRule('background-color', 'blue');
    
    // Обновляем состояние
    wrapper.setState({ isActive: true });
    
    // Проверяем изменённый цвет фона
    expect(element).toHaveStyleRule('background-color', 'green');
  });
});

Здесь используется jest-styled-components для проверки, что стиль компонента StyledComponent изменяется корректно при изменении пропса active.

Заключение

Проверка встроенных стилей в React-компонентах является важной частью тестирования, особенно когда компонент имеет динамическую визуальную составляющую. Enzyme предоставляет гибкие инструменты для манипуляции с компонентами и проверки их стилей. Использование таких методов, как mount, find(), setState() и prop('style'), позволяет удобно тестировать как inline-стили, так и стили, зависящие от состояния или пропсов компонента. В сочетании с дополнительными библиотеками, такими как jest-styled-components, можно значительно улучшить тестирование визуальных изменений.

Оглавление