Enzyme: A redux-connected component being translated into ConnectFunction ?

[isaaclem]

I have a failed unit test as below

  it('contains a wallet component', () => {
    console.log(app.debug());
    expect(app.find('Connect(Wallet)').exists()).toBe(true);
  });

Wallet.js

...

export class Wallet extends Component {
  ...
}

export default connect(state => ({ balance: state }))(Wallet);

App.js

import React, { Component } from 'react'
import Wallet from './Wallet';

class App extends Component {
  render() {
    return (
    <div>
      <h2>Loot Check</h2>
      <hr />
      <Wallet />
    </div>)
  }
}

export default App;

And below is the result of console.log(app.debug())

console.log src/components/App.test.js:13
      <div>
        <h2>
          Loot Check
        </h2>
        <hr />
        <ConnectFunction />
      </div>

I don't understand, why a redux-connected component being turned into ConnectFunction?

API

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

Version

| library | version
| ------------------- | -------
| enzyme | ^3.9.0
| react | ^16.8.6
| react-dom | ^16.8.6
| react-test-renderer |
| 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]

Because you're using shallow, which doesn't dig into the render methods of nested components - and since connect is an HOC, you need one .dive() per HOC.

In other words, what's the output of app.find('Connect(Wallet)').dive().debug()?

[ajjuRwt7385]

Because you're using shallow, which doesn't dig into the render methods of nested components - and since connect is an HOC, you need one .dive() per HOC.

In other words, what's the output of app.find('Connect(Wallet)').dive().debug()?

I face the same issue and on trying app.find('Connect(Wallet)').dive().debug() it throws error:
Method “dive” is meant to be run on 1 node. 0 found instead.

[ljharb]

What shows up with app.debug()? be sure the displayed display name is what you’re passing into find.

[ajjuRwt7385]

app.debug() was showing <ConnectFunction /> for the connected Wallet component with react-redux v7.0.2. I just downgraded react-redux to v5 and the <Connect(Wallet) /> is showing up now.

[ljharb]

react-redux 6 and 7 won’t work properly with enzyme until the next enzyme release.

[wojtekmaj]

If you:

• Really want to use React-Redux 6/7 now
• Use only Shallow rendering and this don't worry about breaking connect() functionality
• And don't want to wait for Enzyme update

then you can mock it like so:

/**
 * Workaround for Enzyme 3.9.0 not working with React-Redux hooks-based connect()
 */
jest.mock("react-redux", () => ({
  connect(/* mapStateToProps, mapDispatchToProps */) {
    return function (WrappedComponent) {
      function FakeConnect() {
        return <WrappedComponent />;
      }
      const name = WrappedComponent.displayName || WrappedComponent.name || "Component";
      FakeConnect.displayName = `Connect(${name})`;
      return FakeConnect;
    };
  }
}));

It's not great, but gets the job done.

[isaaclem]

In that case, should I keep this issue open? Or the team is well aware and I should just close it?

[ljharb]

Let's keep it open until the next release.

[vernak2539]

Sorry that this isn't constructive, but is there a "timeline-ish" as to when you anticipate the next enzyme release, addressing this this, will be made?

[enrique-ramirez]

I struggled with this issue for a while today. I'd also like to know if there's a timeline for the new enzyme release, just so I can add a reminder or something so I won't forget to remove @wojtekmaj's work-around. Thanks!

[ljharb]

v3.10.0 has now been released.

[vernak2539]

Just a note, you'll have to upgrade enzyme-adapter-react-16 as well