Use Enzyme's `wrappingComponent` option in `mount`
Also works with shallow
:
const provided = {super: 'cool', object: ['of', 'things']};
// This means that the root of the tree is going to be the provider
describe('Some Component', () => {
it('does cool things when props change', () => {
const target = mount(
<CoolProvider thing={provided}
<Component changeMe={false} />
</CoolProvider>
})
})
// This means that the root of the tree will be your Component
describe('Some Component', () => {
it('does cool things when props change', () => {
const target = mount(<Component changeMe={false} />, {
wrappingComponent: CoolProvider,
wrappingComponentProps: {super: 'cool', object: ['of', 'things']}
})
})
This pattern is particularly meaningful when you want to call setProps
or other methods that are only valid on the root of the component tree, because dive
can't help you there. If you want to change the props on both, you can use target.getWrappingComponent()
to get at the wrapping component in the same way!
https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/getWrappingComponent.html
Tweet