Powered by GitBook

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.equal(true);
  });

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

});

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

Arguments

node (ReactElement): The node to render
options (Object [optional]):
options.context: (Object [optional]): Context to be passed into the component

Returns

ShallowWrapper: The wrapper instance around the rendered output.

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(nodeOrNodes) => Boolean`

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

`.containsMatchingElement(node) => Boolean`

Returns whether or not a given react element exists in the shallow render tree.

`.containsAllMatchingElements(nodes) => Boolean`

Returns whether or not all the given react elements exists in the shallow render tree.

`.containsAnyMatchingElements(nodes) => Boolean`

Returns whether or not one of the given react elements exists in the shallow render tree.

`.equals(node) => Boolean`

Returns whether or not the current render tree is equal to the given node, based on the expected value.

`.matchesElement(node) => Boolean`

Returns whether or not a given react element matches the shallow render tree.

`.hasClass(className) => Boolean`

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

`.is(selector) => Boolean`

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

`.isEmpty() => Boolean`

Returns whether or not the current node is empty.

`.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.

`.childAt(index) => ShallowWrapper`

Returns a new wrapper with child at the specified index.

`.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([options]) => ShallowWrapper`

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

`.render() => CheerioWrapper`

Returns a CheerioWrapper of the current node's subtree.

`.unmount() => ShallowWrapper`

A method that un-mounts the component.

`.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.

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

Returns the context of the root component.

`.props() => Object`

Returns the props of the current node.

`.prop(key) => Any`

Returns the named prop of the current node.

`.key() => String`

Returns the key of the current node.

`.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.

`.setContext(context) => ShallowWrapper`

Manually sets context 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.

`.name() => String`

Returns the name 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.

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

Returns a new wrapper with a subset of the nodes of the original wrapper, according to the rules of Array#slice.

`.tap(intercepter) => Self`

Taps into the wrapper method chain. Helpful for debugging.

`.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(predicate) => Boolean`

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

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

Shallow render the one non-DOM child of the current wrapper, and return a wrapper around the result.