dive.md

.dive([options]) => ShallowWrapper

Shallow render the one non-DOM child of the current wrapper, and return a wrapper around the result.

NOTE: can only be called on a wrapper of a single non-DOM component element node, otherwise it will throw an error. If you have to shallow-wrap a wrapper with multiple child nodes, use .shallow().

Arguments

1. options (Object [optional]):

• options.context: (Object [optional]): Context to be passed into the component

Returns

ShallowWrapper: A new wrapper that wraps the current node after it's been shallow rendered.

Examples

function Bar() {
  return (
    <div>
      <div className="in-bar" />
    </div>
  );
}

function Foo() {
  return (
    <div>
      <Bar />
    </div>
  );
}

const wrapper = shallow(<Foo />);
expect(wrapper.find('.in-bar')).to.have.lengthOf(0);
expect(wrapper.find(Bar)).to.have.lengthOf(1);
expect(wrapper.find(Bar).dive().find('.in-bar')).to.have.lengthOf(1);

Common Gotchas

• When using the React.createContext() API, if you only dive a <Consumer /> (even if there is a <Provider /> in your component tree) you always get the default context value. If you want the <Consumer /> to receive your <Provider />'s value you must first .dive() the <Provider>, then .dive() the <Consumer />.

  const { Provider, Consumer } = React.createContext('foo');
  function MyComponent() {
    return (
      <div>
        <Provider value="bar">
          <Consumer>
            {value => (
              <div>{value}</div>
            )}
          </Consumer>
        </Provider>
      </div>
    );
  }
  const wrapper = shallow(<MyComponent />);
  wrapper
    .find(Consumer)
    .dive()
    .text(); // "foo"
  wrapper
    .find(Provider)
    .dive()
    .find(Consumer)
    .dive()
    .text(); // "bar"