Полный API рендеринга (mount(...))

Полный рендеринг DOM идеален для случаев использования, когда у вас есть компоненты, которые могут взаимодействовать с API DOM или нужно тестировать компоненты, обернутые в высших порядке компоненты.

Полный рендеринг DOM требует, чтобы полный API DOM был доступен в глобальной области видимости. Это означает, что он должен выполняться в среде, которая, по крайней мере, «похожа» на среду браузера. Если вы не хотите запускать свои тесты внутри браузера, рекомендуемый подход к использованию mount — полагаться на библиотеку под названием jsdom, которая представляет собой фактически бессерверный браузер, реализованный полностью на JS.

Примечание: в отличие от поверхностного или статического рендеринга, полный рендеринг фактически монтирует компонент в DOM, что означает, что тесты могут влиять друг на друга, если все они используют один и тот же DOM. Имейте это в виду при написании тестов и, при необходимости, используйте .unmount() или что-то подобное для очистки.

import { mount } from 'enzyme';
import sinon from 'sinon';
import Foo from './Foo';

describe('<Foo />', () => {
  it('calls componentDidMount', () => {
    sinon.spy(Foo.prototype, 'componentDidMount');
    const wrapper = mount(<Foo />);
    expect(Foo.prototype.componentDidMount).to.have.property('callCount', 1);
  });

  it('allows us to set props', () => {
    const wrapper = mount(<Foo bar="baz" />);
    expect(wrapper.props().bar).to.equal('baz');
    wrapper.setProps({ bar: 'foo' });
    expect(wrapper.props().bar).to.equal('foo');
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = mount((
      <Foo onButtonClick={onButtonClick} />
    ));
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });
});

`mount(node[, options]) => ReactWrapper`

Аргументы

node (ReactElement): Узел для рендеринга
options (Object [необязательно]):
options.context: (Object [необязательно]): Контекст, который будет передан в компонент
options.attachTo: (DOMElement [необязательно]): Элемент DOM для прикрепления компонента к нему.
options.childContextTypes: (Object [необязательно]): Объединённый contextTypes для всех дочерних элементов обертки.
options.wrappingComponent: (ComponentType [необязательно]): Компонент, который будет отображен как родитель node. Он может использоваться для предоставления контекста node, среди прочего. См. getWrappingComponent() документацию для примера. Примечание: wrappingComponent обязательно должен отображать своих дочерних элементов.
options.wrappingComponentProps: (Object [необязательно]): Начальные свойства для передачи wrappingComponent если они указаны.

Возвращаемое значение

ReactWrapper: Экземпляр обертки вокруг отрисованного результата.

Полный API рендеринга (mount(...))

mount(node[, options]) => ReactWrapper

Аргументы

Возвращаемое значение

API ReactWrapper

`mount(node[, options]) => ReactWrapper`