Тестирование Bootstrap компонентов

Enzyme является мощной библиотекой для тестирования React-компонентов, предоставляя простые и удобные методы для рендеринга, взаимодействия и ассертов. В контексте тестирования компонентов, использующих фреймворк Bootstrap, Enzyme предоставляет все необходимые инструменты для проверки визуального состояния компонентов, их взаимодействия и правильности работы в сочетании с CSS-классами и стилями.

Подготовка окружения

Прежде чем приступить к тестированию компонентов Bootstrap, необходимо настроить проект. Это включает установку зависимостей для React, Enzyme и адаптера для React.

  1. Установка зависимостей:
npm install --save react react-dom
npm install --save-dev enzyme enzyme-adapter-react-16 jest
  1. Настройка адаптера для Enzyme:

Создайте файл setupTests.js в корне проекта и добавьте код для инициализации Enzyme:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

Основы работы с Enzyme

Enzyme предоставляет несколько методов для рендеринга и тестирования компонентов: shallow, mount, и render. Каждый из этих методов имеет свое применение в зависимости от уровня тестирования:

  • shallow рендерит компонент на одном уровне, не углубляясь в дочерние компоненты.
  • mount выполняет полный рендеринг компонента вместе с дочерними компонентами.
  • render создает статичный HTML, который можно использовать для проверки вывода.

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

Тестирование простых компонентов с использованием Bootstrap

Предположим, что необходимо протестировать компонент, использующий кнопки из Bootstrap. Рассмотрим следующий компонент:

import React from 'react';

const ButtonComponent = () => (
  <button className="btn btn-primary">Click me</button>
);

export default ButtonComponent;

Для тестирования этого компонента можно использовать Enzyme, проверив, что кнопка имеет правильный класс btn btn-primary.

import React from 'react';
import { shallow } from 'enzyme';
import ButtonComponent from './ButtonComponent';

describe('ButtonComponent', () => {
  it('должен рендерить кнопку с классом "btn btn-primary"', () => {
    const wrapper = shallow(<ButtonComponent />);
    expect(wrapper.find('button').hasClass('btn btn-primary')).toBe(true);
  });
});

Этот тест проверяет, что компонент рендерит кнопку с нужными классами, которые используются для стилизации в Bootstrap.

Тестирование компонентов с интерактивностью

Многие компоненты Bootstrap имеют интерактивные элементы, такие как модальные окна, карусели и всплывающие подсказки. Например, рассмотрим компонент модального окна:

import React, { useState } from 'react';

const ModalComponent = () => {
  const [show, setShow] = useState(false);

  const toggleModal = () => setShow(!show);

  return (
    <>
      <button className="btn btn-primary" onCl ick={toggleModal}>
        Open Modal
      </button>
      {show && (
        <div className="modal show" tabIndex="-1" role="dialog">
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title">Modal title</h5>
                <button type="button" className="close" onCl ick={toggleModal}>
                  <span>&times;</span>
                </button>
              </div>
              <div className="modal-body">
                <p>Modal content</p>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default ModalComponent;

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

import React from 'react';
import { shallow } from 'enzyme';
import ModalComponent from './ModalComponent';

describe('ModalComponent', () => {
  it('должен открывать модальное окно при клике на кнопку', () => {
    const wrapper = shallow(<ModalComponent />);
    expect(wrapper.find('.modal').length).toBe(0); // модальное окно не отображается изначально
    wrapper.find('button').simulate('click');
    expect(wrapper.find('.modal').length).toBe(1); // модальное окно появляется после клика
  });
});

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

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

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

import React from 'react';

const CustomCard = () => (
  <div className="card" style={{ backgroundColor: 'lightblue' }}>
    <div className="card-body">
      <h5 className="card-title">Card title</h5>
      <p className="card-text">Some quick example text to build on the card title.</p>
    </div>
  </div>
);

export default CustomCard;

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

import React from 'react';
import { shallow } from 'enzyme';
import CustomCard from './CustomCard';

describe('CustomCard', () => {
  it('должен иметь стиль backgroundColor: lightblue', () => {
    const wrapper = shallow(<CustomCard />);
    expect(wrapper.find('.card').prop('style')).toHaveProperty('backgroundColor', 'lightblue');
  });
});

В этом тесте проверяется, что компонент использует правильный кастомный стиль фона.

Тестирование Bootstrap компонентов с использованием Jest

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

import React, { useState, useEffect } from 'react';

const AsyncComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      setData('Loaded data');
    }, 1000);
  }, []);

  return (
    <div className="alert alert-success" role="alert">
      {data || 'Loading...'}
    </div>
  );
};

export default AsyncComponent;

Для тестирования компонента с асинхронной логикой можно использовать Jest с Enzyme:

import React from 'react';
import { shallow } from 'enzyme';
import AsyncComponent from './AsyncComponent';

describe('AsyncComponent', () => {
  it('должен показывать данные после загрузки', () => {
    jest.useFakeTimers();
    const wrapper = shallow(<AsyncComponent />);
    expect(wrapper.text()).toBe('Loading...');

    jest.runAllTimers(); // Симулируем завершение таймера
    wrapper.update();
    expect(wrapper.text()).toBe('Loaded data');
  });
});

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

Заключение

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

Оглавление