ldclient-react withLDConsumer does not return a React.Component, hence does not work with Enzyme's dive()

[shykln]

Hi,

I'm trying to add ldclient-react to my project and the application runs well. But my unit test failed. I wrote the unit test with jest + Enzyme.

TypeError: ShallowWrapper::dive() can only be called on components

      54 |       .dive()
      55 |       .dive()
    > 56 |       .dive();
         |        ^
      57 |     expect(wrapper.find(GlobalFilter).length).toBe(1);
      58 |   });

The reason why it failed is because that the withLDConsumer method returns (props: P) => JSX.Element, and this return type is not a Component.

And dive() only works with Component. Hence dive() throws exception.

https://airbnb.io/enzyme/docs/api/ShallowWrapper/dive.html

Can you change the return type of LDConsumer to Component? I think based on the definition of React, an HOC should return a new Component. https://reactjs.org/docs/higher-order-components.html
But LDConsumer returns a (props: P) => JSX.Element which is not a Component.

I'm new to React. Could there be a way to work around this, or could we get a code change here?

[yusinto]

Hi there @shykln I would recommend you export the GlobalFilterWidget component and test it directly without going through the withLDConsumer. This way you don't have to worry about the withLDConsumer hoc in your test. This hoc is well tested in its own package so you don't have to worry about testing it.

You can simply pass the flags prop to the GlobalFilterWidget component and write tests that way. Hope that helps!

[shykln]

Thanks, @yusinto. Please excuse me if I make wrong statements.

I need to get the flags from LDConsumer somewhere eventually, I think. Then no matter where it is that LDConsumer is used, the component wrapped in the LDConsumer will not be testable with Enzyme.

Ideally, an HOC should take a Component and return a new Component. But LDConsumer does not return a Component. It returns a function that returns a JSX.Element. I think ideally this behavior should be changed so that GlobalFilter with export default LDConsumer(GlobalFilter) can be tested with Enzyme's dive().

[gaurav-tanwar-gt]

I am also having the same issue while testing with enzyme as withLDConsumer return HOC.
is there any workaround for the same?

[eli-darkly]

Closing this because 1. it may be obsolete but 2. if it isn't, https://github.com/launchdarkly/react-client-sdk is now a separate project (I believe this issue was filed at a time when it was just a folder within a js-client-sdk monorepo).