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);
});
});node(ReactElement): The node to renderoptions(Object[optional]):
options.context: (Object[optional]): Context to be passed into the componentoptions.attachTo: (DOMElement[optional]): DOM Element to attach the component to.options.childContextTypes: (Object[optional]): Merged contextTypes for all children of the wrapper.
ReactWrapper: The wrapper instance around the rendered output.
Find every node in the render tree that matches the provided selector.
Find every node in the render tree that returns true for the provided predicate function.
Remove nodes in the current wrapper that do not match the provided selector.
Remove nodes in the current wrapper that do not return true for the provided predicate function.
Removes nodes that are not host nodes; e.g., this will only return HTML nodes.
Returns whether or not a given node or array of nodes is somewhere in the render tree.
Returns whether or not a given react element is somewhere in the render tree.
Returns whether or not all the given react elements are somewhere in the render tree.
Returns whether or not one of the given react elements is somewhere in the render tree.
Returns whether or not the current root node has the given class name or not.
Returns whether or not the current node matches a provided selector.
Returns whether or not the current node exists, or, if given a selector, whether that selector has any matching results.
Deprecated: Use .exists() instead.
Returns whether or not the current component returns a falsy value.
Remove nodes in the current wrapper that match the provided selector. (inverse of .filter())
Get a wrapper with all of the children nodes of the current wrapper.
Returns a new wrapper with child at the specified index.
Get a wrapper with all of the parents (ancestors) of the current node.
Get a wrapper with the direct parent of the current node.
Get a wrapper with the first ancestor of the current node to match the provided selector.
Returns a CheerioWrapper of the current node's subtree.
Returns a wrapper of the node rendered by the provided render prop.
Returns a string representation of the text nodes in the current render tree.
Returns a static HTML rendering of the current node.
Returns the node at the provided index of the current wrapper.
Returns the outer most DOMComponent of the current wrapper.
Returns a wrapper of the node at the provided index of the current wrapper.
Returns a wrapper of the first node of the current wrapper.
Returns a wrapper of the last node of the current wrapper.
Returns the state of the root component.
Returns the context of the root component.
Returns the props of the root component.
Returns the named prop of the root component.
Returns the key of the root component.
Simulates an event on the current node.
Manually sets state of the root component.
Manually sets props of the root component.
Manually sets context of the root component.
Returns the wrapper's underlying instance.
A method that un-mounts the component.
A method that re-mounts the component.
Calls .forceUpdate() on the root component instance.
Returns a string representation of the current render tree for debugging purposes.
Returns the type of the current node of the wrapper.
Returns the name of the current node of the wrapper.
Iterates through each node of the current wrapper and executes the provided function
Maps the current array of nodes to another array.
Returns whether or not a given react element matches the current render tree.
Reduces the current array of nodes to a value
Reduces the current array of nodes to a value, from right to left.
Returns a new wrapper with a subset of the nodes of the original wrapper, according to the rules of Array#slice.
Taps into the wrapper method chain. Helpful for debugging.
Returns whether or not any of the nodes in the wrapper match the provided selector.
Returns whether or not any of the nodes in the wrapper pass the provided predicate function.
Returns whether or not all of the nodes in the wrapper match the provided selector.
Returns whether or not all of the nodes in the wrapper pass the provided predicate function.
Returns the node that matches the provided reference name.
Unmount the component from the DOM node it's attached to.