Статический API рендеринга

Используйте функцию render enzyme для генерации HTML из вашего React-дерева и анализа полученной структуры HTML.

render возвращает обёртку, очень похожую на другие рендеры в enzyme, mount и shallow; однако, render использует стороннюю библиотеку разбора и обхода HTML Cheerio. Мы считаем, что Cheerio отлично справляется с разбором и обходом HTML, и дублирование этой функциональности самими нами было бы нецелесообразно.

Для целей этой документации мы будем ссылаться на конструктор Cheerio как на CheerioWrapper, то есть он аналогичен нашим ReactWrapper и ShallowWrapper конструкторам. Вы можете обратиться к документации API Cheerio для получения информации о методах, доступных в экземпляре CheerioWrapper.

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

import React from 'react';
import { render } from 'enzyme';
import PropTypes from 'prop-types';

describe('<Foo />', () => {
  it('renders three `.foo-bar`s', () => {
    const wrapper = render(<Foo />);
    expect(wrapper.find('.foo-bar')).to.have.lengthOf(3);
  });

  it('rendered the title', () => {
    const wrapper = render(<Foo title="unique" />);
    expect(wrapper.text()).to.contain('unique');
  });

  it('renders a div', () => {
    const wrapper = render(<div className="myClass" />);
    expect(wrapper.html()).to.contain('div');
  });

  it('can pass in context', () => {
    function SimpleComponent(props, context) {
      const { name } = context;
      return <div>{name}</div>;
    }
    SimpleComponent.contextTypes = {
      name: PropTypes.string,
    };

    const context = { name: 'foo' };
    const wrapper = render(<SimpleComponent />, { context });
    expect(wrapper.text()).to.equal('foo');
  });
});