Full Rendering API (mount(...))

Full DOM rendering is ideal for use cases where you have components that may interact with DOM APIs or need to test components that are wrapped in higher order components.

Full DOM rendering requires that a full DOM API be available at the global scope. This means that it must be run in an environment that at least “looks like” a browser environment. If you do not want to run your tests inside of a browser, the recommended approach to using mount is to depend on a library called jsdom which is essentially a headless browser implemented completely in JS.

Note: unlike shallow or static rendering, full rendering actually mounts the component in the DOM, which means that tests can affect each other if they are all using the same DOM. Keep that in mind while writing your tests and, if necessary, use .unmount() or something similar as cleanup.

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

Arguments

1. node (ReactElement): The node to render
2. options (Object [optional]):

• options.context: (Object [optional]): Context to be passed into the component
• options.attachTo: (DOMElement [optional]): DOM Element to attach the component to.
• options.childContextTypes: (Object [optional]): Merged contextTypes for all children of the wrapper.
• options.wrappingComponent: (ComponentType [optional]): A component that will render as a parent of the node. It can be used to provide context to the node, among other things. See the getWrappingComponent() docs for an example. Note: wrappingComponent must render its children.
• options.wrappingComponentProps: (Object [optional]): Initial props to pass to the wrappingComponent if it is specified.

Returns

ReactWrapper: The wrapper instance around the rendered output.

ReactWrapper API

.find(selector) => ReactWrapper

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

.findWhere(predicate) => ReactWrapper

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

.filter(selector) => ReactWrapper

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

.filterWhere(predicate) => ReactWrapper

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

.hostNodes() => ReactWrapper

Removes nodes that are not host nodes; e.g., this will only return HTML nodes.

.contains(nodeOrNodes) => Boolean

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

.containsMatchingElement(node) => Boolean

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

.containsAllMatchingElements(nodes) => Boolean

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

.containsAnyMatchingElements(nodes) => Boolean

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

.equals(node) => Boolean

Returns whether or not the current wrapper root node render tree looks like the one passed in.

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

.exists([selector]) => Boolean

Returns whether or not the current node exists, or, if given a selector, whether that selector has any matching results.

.isEmpty() => Boolean

Deprecated: Use .exists() instead.

.isEmptyRender() => Boolean

Returns whether or not the current component returns a falsy value.

.not(selector) => ReactWrapper

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

.children([selector]) => ReactWrapper

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

.childAt(index) => ReactWrapper

Returns a new wrapper with child at the specified index.

.parents([selector]) => ReactWrapper

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

.parent() => ReactWrapper

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

.closest(selector) => ReactWrapper

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

.render() => CheerioWrapper

Returns a CheerioWrapper of the current node's subtree.

.renderProp(key)() => ReactWrapper

Returns a wrapper of the node rendered by the provided render prop.

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

.getDOMNode() => DOMComponent

Returns the outer most DOMComponent of the current wrapper.

.getElement() => ReactElement

Returns the wrapped ReactElement.

.getElements() => Array<ReactElement>

Returns the wrapped ReactElements.

.at(index) => ReactWrapper

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

.first() => ReactWrapper

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

.last() => ReactWrapper

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

.prop(key) => Any

Returns the named prop of the root component.

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

Invokes a prop function on the current node and returns the function's return value.

.key() => String

Returns the key of the root component.

.simulate(event[, mock]) => ReactWrapper

Simulates an event on the current node.

.setState(nextState) => ReactWrapper

Manually sets state of the root component.

.setProps(nextProps[, callback]) => ReactWrapper

Manually sets props of the root component.

.setContext(context) => ReactWrapper

Manually sets context of the root component.

.instance() => ReactComponent|DOMComponent

Returns the wrapper's underlying instance.

.getWrappingComponent() => ReactWrapper

Returns a wrapper representing the wrappingComponent, if one was passed.

.unmount() => ReactWrapper

A method that un-mounts the component.

.mount() => ReactWrapper

A method that re-mounts the component.

.update() => ReactWrapper

Syncs the enzyme component tree snapshot with the react component tree.

.debug() => String

Returns a string representation of the current 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) => ReactWrapper

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.

.matchesElement(node) => Boolean

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

.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]]) => ReactWrapper

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.

.ref(refName) => ReactComponent | HTMLElement

Returns the node that matches the provided reference name.

.detach() => void

Unmount the component from the DOM node it's attached to.