mount.md

Full Rendering API (mount(...))

Full DOM rendering is ideal for use cases where you have components that may interact with DOM apis, or may require the full lifecycle in order to fully test the component (ie, componentDidMount etc.)

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.

import { mount } from 'enzyme';

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

  it('calls componentDidMount', () => {
    spy(Foo.prototype, 'componentDidMount');
    const wrapper = mount(<Foo />);
    expect(Foo.prototype.componentDidMount.calledOnce).to.equal(true);
  });

  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 = spy();
    const wrapper = mount(
      <Foo onButtonClick={onButtonClick} />
    );
    wrapper.find('button').simulate('click');
    expect(onButtonClick.calledOnce).to.equal(true);
  });

});

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.

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

.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 is somewhere in the render tree.

.containsAllMatchingElements(nodes) => Boolean

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

.containsAnyMatchingElements(nodes) => Boolean

Returns whether or not one of the given react elements 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.

.isEmpty() => Boolean

Returns whether or not the current node is empty.

.not(selector) => ReactWrapper

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

.children() => ReactWrapper

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

.childAt() => ReactWrapper

Returns a new wrapper with child at the specified index.

.parents() => 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.

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

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

Manually sets props of the root component.

.setContext(context) => ReactWrapper

Manually sets context of the root component.

.instance() => ReactComponent

Returns the instance of the root component.

.unmount() => ReactWrapper

A method that un-mounts the component.

.mount() => ReactWrapper

A method that re-mounts the component.

.update() => ReactWrapper

Calls .forceUpdate() on the root component instance.

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

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

Returns a wrapper of the node that matches the provided reference name.

.detach() => void

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