Skip to content

Files

Latest commit

 

History

History
209 lines (142 loc) · 8.15 KB

shallow.md

File metadata and controls

209 lines (142 loc) · 8.15 KB

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 every node in the render tree that matches the provided selector.

Find every node in the render tree that return 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.

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 exists in the shallow render tree.

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

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

Returns whether or not the current render tree is equal to the given node, based on the expected value.

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

Returns whether or not the current 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 is empty.

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.

Shallow renders the current node and returns a shallow wrapper around it.

Returns a CheerioWrapper of the current node's subtree.

A method that un-mounts the component.

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

Returns the named prop of the current node.

Returns the key of the current node.

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 instance of the root component.

Calls .forceUpdate() on the root component instance.

Returns a string representation of the current shallow 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.

Reduces the current array of nodes to a value

Reduces the current array of nodes to a value, from right to left.

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.