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?

hocponent.jsx

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

wrappedponent.jsx

class WrappedComponent extends React.Component {
  ...
}

export default HOC(WrappedComponent)

rootponent.jsx

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

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

rootponent.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?

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?

• javascript
• reactjs
• jestjs
• enzyme

• What's condition? Please, show how you import WrappedComponent. It's unclear whether it's equal to HOC(WrappedComponent) or class WrappedComponent. wrapper.find(WrappedComponent) => returns 0 - find doesn't return a number. Are you checking its length? Please, show actual test code. – Estus Flask Commented Dec 14, 2018 at 10:18
• Condition could be anything, it either resolves to true or false. When false, it should render the WrappedComponent. – Bas G Commented Dec 14, 2018 at 10:32
• It's unknown whether it's true or false in your test. It could be a reason why you cannot assert the existence - because the comp doesn't exist. It's likely allows WrappedComponent to be rendered since you see it wrapper.debug() but the question shouldn't contain any ambiguities. So you import a WrappedComponent without HOC, don't you? You have to import a decorated component. I suppose it's default import in your case, import WrappedComponent from 'WrappedComponent'. – Estus Flask Commented Dec 14, 2018 at 10:43
• It is being rendered, I can confirm this in wrapper.debug(). The wrapped component export statement is export default HOC(WrappedComponent) In the spec file the wrappedComponent is imported as import {WrappedComponent} from '..' – Bas G Commented Dec 14, 2018 at 11:58

2 Answers 2

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);

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

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