Jest Enzyme how to shallow test for existence of wrapped component

Question

I am testing a component that conditionally renders a wrapped component. I am using enzyme and jest and the root component is rendered through the shallow() method. The issue is testing if the Root component contains the wrapped component.

How would I test if the wrapped component exists without using the mount() render method?

hoc.component.jsx

export function HOC(Component) {
   render() {
     return <Component /> 
   }
}

wrapped.component.jsx

class WrappedComponent extends React.Component {
  ...
}

export default HOC(WrappedComponent)

root.component.jsx

class RootComponent extends React.Component {
   render() {
     return (
        condition ? ... :
         <WrappedComponent/>
     )
   }
}

When testing the root.component.jsx I would like to check if the WrappedComponent exists.

root.component.spec.js import { WrappedComponent } from 'WrappedComponent'

const wrapper = shallow(<RootComponent {...props}/>);
wrapper.find(WrappedComponent).length => returns 0

If I log wrapper.debug() I see the following:

...<HOC(WrappedComponent) />

How would I test the existence of the WrappedComponent while testing the RootComponent?

Answer 1

It should be possible to assert the existence of a component, as long as WrappedComponent in tests is not original component class but a component wrapped in HOC, i.e. HOC(WrappedComponent).

If HOC(WrappedComponent) is default export, it should be:

import WrappedComponent from 'WrappedComponent'

...

const wrapper = shallow(<RootComponent {...props}/>);
expect(wrapper.find(WrappedComponent).length).toBe(1);

Answer 2

You can use the selector 'HOC(WrappedComponent)':

test('WrappedComponent is rendered', () => {
    const wrapper = shallow(<RootComponent {...props}/>);
    expect(wrapper.find('HOC(WrappedComponent)').length).toEqual(1);
}