shallow.md

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

1. node (ReactElement): The node to render
2. 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.

.exists() => Boolean

Returns whether or not the current node exists.

.isEmpty() => Boolean

Deprecated: Use .exists() instead.

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