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.
As of Enzyme v3, the shallow API does call React lifecycle methods such as componentDidMount and componentDidUpdate. You can read more about this in the version 3 migration guide.
import { shallow } from 'enzyme';
import sinon from 'sinon';
import Foo from './Foo';
describe('<MyComponent />', () => {
it('renders three <Foo /> components', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.find(Foo)).to.have.lengthOf(3);
});
it('renders an `.icon-star`', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.find('.icon-star')).to.have.lengthOf(1);
});
it('renders 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).to.have.property('callCount', 1);
});
});
shallow(node[, options]) => ShallowWrapper
node (ReactElement): The node to renderoptions (Object [optional]):options.context: (Object [optional]): Context to be passed into the componentoptions.disableLifecycleMethods: (Boolean [optional]): If set to true, componentDidMount is not called on the component, and componentDidUpdate is not called after setProps and setContext. Default to false.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.options.suspenseFallback: (Boolean [optional]): If set to true, when rendering Suspense enzyme will replace all the lazy components in children with fallback element prop. Otherwise it won't handle fallback of lazy component. Default to true. Note: not supported in React < 16.6.ShallowWrapper: The wrapper instance around the rendered output.
.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 returns 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.
.hostNodes() => ShallowWrapper
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 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([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) => 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.
.renderProp(key)() => ShallowWrapper
Returns a wrapper of the node rendered by the provided render prop.
.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.
.getElement() => ReactElement
Returns the wrapped ReactElement.
.getElements() => Array<ReactElement>
Returns the wrapped ReactElements.
.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.
.invoke(propName)(...args) => Any
Invokes a prop function on the current node and returns the function's return value.
.simulate(event[, data]) => ShallowWrapper
Simulates an event on the current node.
.setState(nextState) => ShallowWrapper
Manually sets state of the root component.
.setProps(nextProps[, callback]) => ShallowWrapper
Manually sets props of the root component.
.setContext(context) => ShallowWrapper
Manually sets context of the root component.
.getWrappingComponent() => ShallowWrapper
Returns a wrapper representing the wrappingComponent, if one was passed.
.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|null
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.
© 2015 Airbnb, Inc.
Licensed under the MIT License.
https://airbnb.io/enzyme/docs/api/shallow.html