How to fix an error with shallow Enzyme in testing ReactJS App

Question

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"

My test look:

import React from "react";
import { shallow } from "enzyme";
import Header from "./Header";

describe("Header Component", () => {
  it("Should render without errors", () => {
    let component = shallow(<Header />);
    let wrapper = component.find(".top_bar");
    expect(wrapper.length).toBe(1);
  });
  it("Should render without errors", () => {
    let component = shallow(<Header />);
    let logo = component.find(".fire_img");
    expect(logo.length).toBe(1);
  });
});

My component look:

  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 (
        <div className="top_bar">
          {time ? (
            <Countdown
              key={time}
              date={new Date(time)}
              renderer={renderer}
              onComplete={() => getData()}
            />
          ) : null}
          <div>
            <div className="search">
              <h6>Enter value to filter products</h6>
              <input
                type="text"
                value={search}
                name="search"
                autoComplete="off"
                onChange={event => this.handleChange(event)}
              />
            </div>
          </div>
        </div>
      );
    }
  }
);

setupTest.js :

import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";

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

My package.json:

  "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": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

It's my first test and I don't know why test didn't work Please help!

Thanks

Answer 1

Add to your package.json this config:

  "jest": {
    "setupFiles": [
      "./path//to//your//setupTest.js"
    ]
  }