API поверхностного рендеринга

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

Начиная с Enzyme v3, API shallow вызывает методы жизненного цикла React, такие как componentDidMount и componentDidUpdate. Подробнее об этом можно узнать в руководстве по миграции с версии 3.

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

describe('<MyComponent />', () => {
  it('renders three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.lengthOf(3);
  });

  it('renders an `.icon-star`', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.icon-star')).to.have.lengthOf(1);
  });

  it('renders children when passed in', () => {
    const wrapper = shallow((
      <MyComponent>
        <div className="unique" />
      </MyComponent>
    ));
    expect(wrapper.contains(<div className="unique" />)).to.equal(true);
  });

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

`shallow(node[, options]) => ShallowWrapper`

Аргументы

node (ReactElement): Узел для рендеринга
options (Object [необязательно]):
- options.context: (Object [необязательно]): Контекст, передаваемый в компонент
- options.disableLifecycleMethods: (Boolean [необязательно]): Если установлено в true, componentDidMount не вызывается для компонента, и componentDidUpdate не вызывается после setProps и setContext. По умолчанию false.
- options.wrappingComponent: (ComponentType [необязательно]): Компонент, который будет отображаться как родитель node. Он может использоваться для предоставления контекста для node, среди прочего. См. getWrappingComponent() документацию для примера. Примечание: wrappingComponent обязательно должен отображать свои дочерние элементы.
- options.wrappingComponentProps: (Object [необязательно]): Начальные свойства для передачи в wrappingComponent , если они указаны.
- options.suspenseFallback: (Boolean [необязательно]): Если установлено в true, при рендеринге Suspense enzyme заменит все ленивые компоненты в дочерних элементах на fallback элемент свойства. В противном случае он не будет обрабатывать резервный вариант ленивого компонента. По умолчанию true. Примечание: не поддерживается в React < 16.6.

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

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

API ShallowWrapper

`.find(selector) => ShallowWrapper`

Находит каждый узел в дереве рендеринга, который соответствует заданному селектору.

`.findWhere(predicate) => ShallowWrapper`

Находит каждый узел в дереве рендеринга, который возвращает true для заданной предикатной функции.

`.filter(selector) => ShallowWrapper`

Удаляет узлы в текущей обёртке, которые не соответствуют предоставленному селектору.

`.filterWhere(predicate) => ShallowWrapper`

Удаляет узлы в текущей обёртке, которые не возвращают true для предоставленной предикатной функции.

`.hostNodes() => ShallowWrapper`

Удаляет узлы, которые не являются узлами-хостами; например, это вернёт только узлы HTML.

`.contains(nodeOrNodes) => Boolean`

Возвращает, является ли заданный узел или массив узлов где-либо в дереве рендеринга.

`.containsMatchingElement(node) => Boolean`

Возвращает, существует ли заданный реактный элемент в дереве поверхностного рендеринга.

`.containsAllMatchingElements(nodes) => Boolean`

Возвращает, существуют ли все заданные реактные элементы в дереве поверхностного рендеринга.

`.containsAnyMatchingElements(nodes) => Boolean`

Возвращает, существует ли один из заданных реактных элементов в дереве поверхностного рендеринга.

`.equals(node) => Boolean`

Возвращает, равно ли текущее дерево рендеринга заданному узлу на основе ожидаемого значения.

`.matchesElement(node) => Boolean`

Возвращает, соответствует ли заданный реактный элемент дереву поверхностного рендеринга.

`.hasClass(className) => Boolean`

Возвращает, содержит ли текущий узел заданное имя класса или нет.

`.is(selector) => Boolean`

Возвращает, соответствует ли текущий узел заданному селектору.

`.exists([selector]) => Boolean`

Возвращает, существует ли текущий узел или, если задан селектор, существует ли у этого селектора какой-либо совпадающий результат.

`.isEmpty() => Boolean`

Устарело: Используйте .exists() вместо этого.

`.isEmptyRender() => Boolean`

Возвращает, возвращает ли текущий компонент ложное значение.

`.not(selector) => ShallowWrapper`

Удаляет узлы в текущей обёртке, которые соответствуют заданному селектору. (обратный .filter())

`.children([selector]) => ShallowWrapper`

Получает обёртку со всеми дочерними узлами текущей обёртки.

`.childAt(index) => ShallowWrapper`

Возвращает новую обёртку с дочерним элементом в указанном индексе.

`.parents([selector]) => ShallowWrapper`

Получает обёртку со всеми родителями (предкам) текущего узла.

`.parent() => ShallowWrapper`

Получает обёртку с непосредственным родителем текущего узла.

`.closest(selector) => ShallowWrapper`

Получает обёртку с первым предком текущего узла, соответствующим предоставленному селектору.

`.shallow([options]) => ShallowWrapper`

Выполняет поверхностный рендеринг текущего узла и возвращает поверхностную обёртку вокруг него.

`.render() => CheerioWrapper`

Возвращает CheerioWrapper поддерева текущего узла.

`.renderProp(key)() => ShallowWrapper`

Возвращает обёртку узла, отображаемого предоставленным свойством рендеринга.

`.unmount() => ShallowWrapper`

Метод, который размонтирует компонент.

`.text() => String`

Возвращает строковое представление текстовых узлов в текущем дереве рендеринга.

`.html() => String`

Возвращает статическое HTML-отображение текущего узла.

`.get(index) => ReactElement`

Возвращает узел в указанном индексе текущей обёртки.

`.getElement() => ReactElement`

Возвращает обернутый ReactElement.

`.getElements() => Array<ReactElement>`

Возвращает обернутые ReactElements.

`.at(index) => ShallowWrapper`

Возвращает обёртку узла в указанном индексе текущей обёртки.

`.first() => ShallowWrapper`

Возвращает обёртку первого узла текущей обёртки.

`.last() => ShallowWrapper`

Возвращает обёртку последнего узла текущей обёртки.

`.state([key]) => Any`

Возвращает состояние корневого компонента.

`.context([key]) => Any`

Возвращает контекст корневого компонента.

`.props() => Object`

Возвращает свойства текущего узла.

`.prop(key) => Any`

Возвращает указанное свойство текущего узла.

`.key() => String`

Возвращает ключ текущего узла.

`.invoke(propName)(...args) => Any`

Вызывает функцию свойства на текущем узле и возвращает значение возврата функции.

`.simulate(event[, data]) => ShallowWrapper`

Имитирует событие на текущем узле.

`.setState(nextState) => ShallowWrapper`

Вручную устанавливает состояние корневого компонента.

`.setProps(nextProps[, callback]) => ShallowWrapper`

Вручную устанавливает свойства корневого компонента.

`.setContext(context) => ShallowWrapper`

Вручную устанавливает контекст корневого компонента.

`.getWrappingComponent() => ShallowWrapper`

Возвращает обёртку, представляющую wrappingComponent, если она была передана.

`.instance() => ReactComponent`

Возвращает экземпляр корневого компонента.

`.update() => ShallowWrapper`

Синхронизирует моментальный снимок дерева компонента enzyme с деревом компонента react.

`.debug() => String`

Возвращает строковое представление текущего дерева поверхностного рендеринга для отладки.

`.type() => String|Function|null`

Возвращает тип текущего узла обёртки.

`.name() => String`

Возвращает имя текущего узла обёртки.

`.forEach(fn) => ShallowWrapper`

Перебирает каждый узел текущей обёртки и выполняет предоставленную функцию.

`.map(fn) => Array`

Преобразует текущий массив узлов в другой массив.

`.reduce(fn[, initialValue]) => Any`

Сводит текущий массив узлов к значению.

`.reduceRight(fn[, initialValue]) => Any`

Сводит текущий массив узлов к значению, справа налево.

`.slice([begin[, end]]) => ShallowWrapper`

Возвращает новую обёртку с подмножеством узлов из исходной обёртки, согласно правилам Array#slice.

`.tap(intercepter) => Self`

Подключается к цепочке методов обёртки. Полезно для отладки.

`.some(selector) => Boolean`

Возвращает значение, указывающее, соответствуют ли какие-либо узлы в обёртке предоставленному селектору.

`.someWhere(predicate) => Boolean`

Возвращает значение, указывающее, удовлетворяет ли какой-либо из узлов в обёртке предоставленной предикатной функции.

`.every(selector) => Boolean`

Возвращает значение, указывающее, соответствуют ли все узлы в обёртке предоставленному селектору.

`.everyWhere(predicate) => Boolean`

Возвращает значение, указывающее, удовлетворяют ли все узлы в обёртке предоставленной предикатной функции.

`.dive([options]) => ShallowWrapper`

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