Enzyme: Error diving through react-redux connected components

[OzzieOrca]

Current behavior

I get a ShallowWrapper::dive() can only be called on components error when trying to .dive() through a component wrapped in react-redux's connect function.

See demo at https://codesandbox.io/s/v33j14k0jl

Expected behavior

I should be able to dive through connected components and shallow render the component's contents. I know this worked as of react-redux 5.1.1. They have transitioned to the new the new React Context API since. If this belongs as an issue in the react-redux repo, I'll recreate it there.

Your environment

Running demo on CodeSandbox

I appreciate the recent work to get the new Context APIs working and they have worked for every other dependency I've upgraded in our React Native app (react-i18next was a crucial one). However something seems different with react-redux. They could have a different/unique implementation. Thanks for looking into this :)

API

• [x] shallow
• [ ] mount
• [ ] render

Version

| library | version
| ------------------- | -------
| enzyme | 3.9.0
| react | 16.6.6
| react-dom | 16.8.6
| react-test-renderer | Not explicitly installed
| adapter (below) | 1.12.1

Adapter

• [x] enzyme-adapter-react-16
• [ ] enzyme-adapter-react-16.3
• [ ] enzyme-adapter-react-16.2
• [ ] enzyme-adapter-react-16.1
• [ ] enzyme-adapter-react-15
• [ ] enzyme-adapter-react-15.4
• [ ] enzyme-adapter-react-14
• [ ] enzyme-adapter-react-13
• [ ] enzyme-adapter-react-helper
• [ ] others ( )

[ljharb]

The currently released version of enzyme doesn't support createContext; the next release will. I believe you'll need to stick to v5 of react-redux until enzyme is released.

[OzzieOrca]

Ok... I've been following the issues linked in https://github.com/airbnb/enzyme/issues/1647#issuecomment-479215154. Have those merged PRs not made it into a release yet or are they not enough for full support of diving with the new Context API?

Good to know anyways. I'll stop wasting time trying to get the react-redux upgrade working for now.

Thanks for the quick reply :) And thanks for the continuing work on the context API stuff!

[ljharb]

They've not made it into a release yet.

[OzzieOrca]

Ah ok. That makes sense. I saw the adapter releases go out afterwards and guess I assumed the code changes were only in the adaptors. Thanks.

[babycannotsay]

@ljharb hi, when release the next?

[ljharb]

When it’s ready and when i have the time; not sooner, I’m afraid.

[matthewdavidrodgers]

You noted that enzyme does not yet support useContext, but the error ShallowWrapper::dive() can only be called on components isn't what I'd expect. Looking for more clarification of what's not supported.

Wrote a quick test like this:

const Context = React.createContext(0);

const Component = () => {
  const ctxVal = React.useContext(Context);
  return <div>{ctxVal}</div>;
};

const tree = (
  <Context.Provider value={5}>
    <Component />
  </Context.Provider>
);

const wrapper = shallow(tree);

expect(wrapper).toMatchInlineSnapshot(`<Component />`);

expect(
  wrapper
    .find("Component")
    .at(0)
    .dive()
).toMatchInlineSnapshot(`
        <div>
          0
        </div>
    `);

const wrapperMounted = mount(tree);

expect(wrapperMounted).toMatchInlineSnapshot(`
  <Component>
    <div>
      5
    </div>
  </Component>
`);

Obviously a shallow render (and diving into the component with useContext) is getting the wrong value (0, the default context value, instead of 5), where mount worked correctly.

However, this is not the error above: ShallowWrapper::dive() can only be called on components. In fact, no error is thrown.

I realize this might be just as much on react-redux's end as enzyme's, but apart from other hooks being used in ConnectFunction, I'm having trouble seeing what could be so unsupported that enzyme can't even register ConnectFunction as a component.

So what makes the ConnectFunction "not a component" in enzyme's eyes?

[ljharb]

@matthewdavidrodgers because the code in enzyme to recognize it hasn't been released yet.

[ljharb]

v3.10.0 has now been released.

[atsikov]

Still something is wrong with react-redux. I suppose it is partially about useMemo as connect with { pure: false }, .text() produces different output.

https://codesandbox.io/s/old-currying-4lme5

Will create new issue as soon as figure out some more particular test case.