Potential issues with store as a prop and shallow test rendering in v7

[wangqunOne]

I write one React test, but I don't get the right result. I don't know the reason.
I use the "enzyme-adapter-react-16": "^1.15.0", "enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.0", "react-test-renderer": "^16.10.2", "react-redux": "^7.1.1",
I got the following error:

Overview test › check children
expect(received).toBe(expected) // Object.is equality
    Expected: 1
    Received: 0
      53 |       // });
      54 |       console.log("********wrapper***", wrapper);
    > 55 |       expect(wrapper.find("header").length).toBe(1);
         |                                             ^

But if I remove the store props, it can find them.
This is my code:

"use strict";

import React, { Component } from "react";
import PropTypes from "prop-types";
import intl from "react-intl-universal";
import { Loading } from "carbon-components-react";
import { connect } from "react-redux";

export class Overview extends Component {
  constructor(props) {
    super(props);
    this.messages = {
      desc: intl.get("OVERVIEW_SUMMARY")
    };
  }

  render() {
    return this.props.serviceCatalog.isFetching ||
      this.props.serviceCatalog.didInvalidate ? (
      <Loading />
    ) : (
      <div>
        <header>
          <h1>{this.props.serviceCatalog.services}</h1>
          <h2 className="title">{intl.get("PRODUCT_TITLE")}</h2>
        </header>
      </div>
    );
  }
}

Overview.propTypes = {
  serviceCatalog: PropTypes.object
};

export default connect(state => ({
  serviceCatalog: state.serviceCatalog
}))(Overview);

And the following is my unit test code:

import React from "react";

import { shallow } from "enzyme";
import { configure } from "enzyme";

import Adapter from "enzyme-adapter-react-16";
import "babel-polyfill";

import Overview from "../../../../src/client/components/overview/";
import intl from "react-intl-universal";
import configureMockStore from "redux-mock-store";

const mockStore = configureMockStore();
const store = mockStore({
  serviceCatalog: {
    isFetching: false,
    didInvalidate: false,
    services: { label: "Fortinet", name: "Fortinet on IBM Cloud" }
  }
});

configure({ adapter: new Adapter() });

(() => {
  const shallowComponent = props => {
    return shallow(<Overview {...props} store={store} />);
  };

  describe("Overview test", () => {
    let wrapper = null;
    beforeAll(() => {
      wrapper = shallowComponent({
        serviceCatalog: {
          isFetching: false,
          didInvalidate: false,
          services: { label: "Fortinet", name: "Fortinet on IBM Cloud" }
        }
      });
    });

    afterAll(() => {
      wrapper.unmount();
    });
    test("check children", () => {
      expect(wrapper.find("header").length).toBe(1);
      expect(wrapper.find("h2").length).toBe(1);
      expect(wrapper.find("h2").text()).toEqual(intl.get("PRODUCT_TITLE"));
    });
  });
})();

Where do I wrong?

[timdorr]

See enzymejs/enzyme#2011

[wangqunOne]

@timdorr I don't know the issue "React hooks support checklist" why is the reason of my failure. Could you explain to me some information in here? I don't understand the issue #2011. And will my issue w be resolve until the issue #2011 is closed? Thanks.

[timdorr]

It's mainly this:

useEffect and useLayoutEffect not works with shallow because react shallow renderer doesn't run it.

You shouldn't be using shallow rendering for connected components. I would use something like React Testing Library instead.