Edit This Page

Shallow Rendering API

Shallow rendering is useful to constrain yourself to testing a component as a unit, and to ensure that your tests aren't indirectly asserting on behavior of child components.

import { shallow } from 'enzyme';

describe('<MyComponent />', () => {

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

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

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

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

});

ShallowWrapper API

`.find(selector) => ShallowWrapper`

Find every node in the render tree that matches the provided selector.

`.findWhere(predicate) => ShallowWrapper`

Find every node in the render tree that return true for the provided predicate function.

`.filter(selector) => ShallowWrapper`

Remove nodes in the current wrapper that do not match the provided selector.

`.filterWhere(predicate) => ShallowWrapper`

Remove nodes in the current wrapper that do not return true for the provided predicate function.

`.contains(node) => Boolean`

Returns whether or not a given node is somewhere in the render tree.

`.hasClass(className) => Boolean`

Returns whether or not the current root node has the given class name or not.

`.is(selector) => Boolean`

Returns whether or not the current node matches a provided selector.

`.not(selector) => ShallowWrapper`

Remove nodes in the current wrapper that match the provided selector. (inverse of .filter())

`.children() => ShallowWrapper`

Get a wrapper with all of the children nodes of the current wrapper.

`.parents() => ShallowWrapper`

Get a wrapper with all of the parents (ancestors) of the current node.

`.parent() => ShallowWrapper`

Get a wrapper with the direct parent of the current node.

`.closest(selector) => ShallowWrapper`

Get a wrapper with the first ancestor of the current node to match the provided selector.

`.shallow() => ShallowWrapper`

Shallow renders the current node and returns a shallow wrapper around it.

`.render() => CheerioWrapper`

Returns a CheerioWrapper of the current node's subtree.

`.text() => String`

Returns a string representation of the text nodes in the current render tree.

`.html() => String`

Returns a static HTML rendering of the current node.

`.get(index) => ReactElement`

Returns the node at the provided index of the current wrapper.

`.at(index) => ShallowWrapper`

Returns a wrapper of the node at the provided index of the current wrapper.

`.first() => ShallowWrapper`

Returns a wrapper of the first node of the current wrapper.

`.last() => ShallowWrapper`

Returns a wrapper of the last node of the current wrapper.

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

Returns the state of the root component.

`.props() => Object`

Returns the props of the root component.

`.prop(key) => Any`

Returns the named prop of the root component.

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

Simulates an event on the current node.

`.setState(nextState) => ShallowWrapper`

Manually sets state of the root component.

`.setProps(nextProps) => ShallowWrapper`

Manually sets props of the root component.

`.instance() => ReactComponent`

Returns the instance of the root component.

`.update() => ShallowWrapper`

Calls .forceUpdate() on the root component instance.

`.debug() => String`

Returns a string representation of the current shallow render tree for debugging purposes.

`.type() => String|Function`

Returns the type of the current node of the wrapper.

`.forEach(fn) => ShallowWrapper`

Iterates through each node of the current wrapper and executes the provided function

`.map(fn) => Array`

Maps the current array of nodes to another array.

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

Reduces the current array of nodes to a value

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

Reduces the current array of nodes to a value, from right to left.

`some(selector) => Boolean`

Returns whether or not any of the nodes in the wrapper match the provided selector.

`someWhere(predicate) => Boolean`

Returns whether or not any of the nodes in the wrapper pass the provided predicate function.

`every(selector) => Boolean`

Returns whether or not all of the nodes in the wrapper match the provided selector.

`everyWhere(selector) => Boolean`

Returns whether or not any of the nodes in the wrapper pass the provided predicate function.