title: How to fix an error with shallow Enzyme in testing ReactJS App
body: <p><a href="https://i.stack.imgur.com/7gWbL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7gWbL.png" alt="enter image description here"></a>I want to test if my component  displayed and I have an error with shallow (see an image of error).
  I am using :
  "enzyme": "^3.10.0",
  "enzyme-adapter-react-16": "^1.14.0",
  "jest-enzyme": "^7.1.1",
  "jest": "^24.8.0"</p>
  
  <p>My test look: </p>
  
  <pre><code>import React from "react";
  import { shallow } from "enzyme";
  import Header from "./Header";
  
  describe("Header Component", () =&gt; {
    it("Should render without errors", () =&gt; {
      let component = shallow(&lt;Header /&gt;);
      let wrapper = component.find(".top_bar");
      expect(wrapper.length).toBe(1);
    });
    it("Should render without errors", () =&gt; {
      let component = shallow(&lt;Header /&gt;);
      let logo = component.find(".fire_img");
      expect(logo.length).toBe(1);
    });
  });
  </code></pre>
  
  <p>My component look: </p>
  
  <pre><code>  class Header extends Component {
      constructor() {
        super();
        this.state = {
          time: undefined,
          search: ""
        };
      }
      componentDidMount() {
        const { getData } = this.props;
        getData();
      }
      render() {
        const { getData, time } = this.props;
        const { search } = this.state;
  
        return (
          &lt;div className="top_bar"&gt;
            {time ? (
              &lt;Countdown
                key={time}
                date={new Date(time)}
                renderer={renderer}
                onComplete={() =&gt; getData()}
              /&gt;
            ) : null}
            &lt;div&gt;
              &lt;div className="search"&gt;
                &lt;h6&gt;Enter value to filter products&lt;/h6&gt;
                &lt;input
                  type="text"
                  value={search}
                  name="search"
                  autoComplete="off"
                  onChange={event =&gt; this.handleChange(event)}
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        );
      }
    }
  );
  </code></pre>
  
  <p>setupTest.js :</p>
  
  <pre><code>import Enzyme from "enzyme";
  import Adapter from "enzyme-adapter-react-16";
  
  Enzyme.configure({ adapter: new Adapter() });
  </code></pre>
  
  <p>My package.json:</p>
  
  <pre><code>  "name": "interview-question",
    "version": "0.1.0",
    "private": true,
    "devDependencies": {
      "react-scripts": "^3.1.1"
    },
    "dependencies": {
      "babel-jest": "^24.9.0",
      "date-fns": "^1.28.0",
      "dayjs": "^1.8.16",
      "enzyme": "^3.10.0",
      "enzyme-adapter-react-16": "^1.14.0",
      "faker": "^4.1.0",
      "jest": "^24.8.0",
      "jest-enzyme": "^7.1.1",
      "lodash": "^4.17.15",
      "node-sass": "^4.12.0",
      "react": "^16.9.0",
      "react-compound-timer": "^1.1.5",
      "react-countdown-now": "^2.1.1",
      "react-dom": "^16.9.0",
      "react-loader-spinner": "^3.1.4",
      "react-redux": "^7.1.0",
      "react-spinners": "^0.6.1",
      "redux": "^4.0.1",
      "redux-devtools-extension": "^2.13.8",
      "redux-thunk": "^2.3.0",
      "styled-components": "^4.3.2"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"
    },
    "browserslist": {
      "production": [
        "&gt;0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    }
  }
  </code></pre>
  
  <p>It's my first test and I don't know why test didn't work
  Please help!</p>
  
  <p>Thanks</p>