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().
options
(Object
[optional]):
options.context
: (Object
[optional]): Context to be passed into the component
ShallowWrapper
: A new wrapper that wraps the current node after it's been shallow rendered.
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);
- 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 />
'svalue
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"