How to test components with react-click-outside

[nerdymax]

When a component is exported with enhanceWithClickOutside, enzyme can't find the component in it.

For example, the following fails:

test('Renders the root div', () => {
  const component = shallow(<MyComponent />);
  expect(component).toContain('div#root-div');
});

MyComponent.js

function MyComponent() {
  // ...
  return (
    <div id="root-div">
      {/* ... */}
    </div>
  );
}
export default enhanceWithClickOutside(MyComponent)

What is the workaround?

[kentor]

This is a general issue with higher order components. Better to ask at the enzyme project.

Resources:
enzymejs/enzyme#539
maybe use dive?
https://github.com/airbnb/enzyme/blob/e7226255bded93e285e36b50e16b59c8dc2458f9/docs/api/ShallowWrapper/dive.md

[hatched]

@nerdymax We don't use enzyme but you may find PR #25 and Issue #20 helpful for the approach we've taken.