Получение HTML-разметки

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

Метод html()

Метод html() используется для извлечения полной HTML-разметки из рендера компонента. Этот метод возвращает строку, содержащую сгенерированную HTML-разметку для всего компонента или его части. Он позволяет сравнить рендер с ожидаемым результатом или проанализировать, что именно рендерит компонент.

Пример использования:

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

describe('<MyComponent />', () => {
  it('должен рендерить правильную HTML-разметку', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.html()).toBe('<div><span>Hello, World!</span></div>');
  });
});

В этом примере метод html() возвращает строку, которая соответствует HTML-разметке компонента MyComponent. Это может быть полезно при тестировании того, что компонент правильно рендерит элементы и правильно строит структуру.

Метод debug()

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

Пример использования:

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

describe('<MyComponent />', () => {
  it('должен отображать правильное дерево компонентов', () => {
    const wrapper = shallow(<MyComponent />);
    console.log(wrapper.debug());
  });
});

Результат работы debug() может выглядеть следующим образом:

<MyComponent>
  <div>
    <span>Hello, World!</span>
  </div>
</MyComponent>

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

Метод render()

Метод render() используется для рендеринга компонента с помощью библиотеки cheerio, которая является серверной альтернативой jQuery. В отличие от shallow(), который рендерит компонент на одном уровне, render() выполняет полное рендеринг, включая все дочерние компоненты.

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

Пример использования:

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

describe('<MyComponent />', () => {
  it('должен рендерить полную HTML-разметку', () => {
    const wrapper = render(<MyComponent />);
    expect(wrapper.html()).toBe('<div><span>Hello, World!</span></div>');
  });
});

Метод render() полезен, когда необходимо получить более точное представление о рендере компонента, включая все дочерние компоненты, так как он выполняет полный рендеринг.

Метод shallow() и его отличие от render()

Метод shallow() рендерит компонент на одном уровне, не углубляясь в его дочерние компоненты. Это позволяет избежать сложных рендерингов и фокусироваться только на логике самого компонента. Однако, для более сложных компонентов с вложенной структурой shallow() может не предоставлять полной картины.

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

Пример использования:

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

describe('<MyComponent />', () => {
  it('должен рендерить компонент с дочерними элементами как заглушки', () => {
    const wrapper = shallow(<MyComponent />);
    console.log(wrapper.debug()); // Покажет дерево с заглушками
  });
});

Использование shallow() полезно для тестирования компонентов в изоляции, когда важна проверка только их поведения, а не внешнего рендеринга.

Сравнение с ReactTestUtils

Enzyme предлагает больше возможностей для манипуляций с компонентами по сравнению с встроенным инструментом ReactTestUtils. В частности, Enzyme предоставляет более высокоуровневые методы, такие как shallow(), mount(), и render(), которые позволяют гибко управлять тем, какие части компонента рендерить и как взаимодействовать с ними.

Использование снимков (Snapshot Testing)

Enzyme также можно использовать в сочетании с тестированием снимков (snapshot testing), что помогает проверять изменения в рендеринге компонентов. Снимки сравнивают текущее состояние рендера с сохранённым ранее состоянием и позволяют легко отслеживать изменения в разметке компонента.

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

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

describe('<MyComponent />', () => {
  it('должен совпадать с сохранённым снимком', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper).toMatchSnapshot();
  });
});

Метод toMatchSnapshot() сравнивает текущую разметку с предыдущим снимком и позволяет обнаруживать неожиданные изменения.

Заключение

Методы получения HTML-разметки в Enzyme, такие как html(), debug(), render() и shallow(), предоставляют гибкие инструменты для тестирования React-компонентов. Эти методы позволяют извлекать нужную информацию о компоненте, от простого рендера до полного дерева элементов, и применяются для различных целей — от проверки рендеринга до отладки и тестирования снимков.

Оглавление