浅酶在ReactJS应用程序测试中的应用

Question

​

我想测试我的组件是否显示，并且我有一个浅层错误(见错误图像)。我使用的是：“酶”："^3.10.0"，“酶-适配器-反应-16”："^1.14.0"，“开玩笑-酶”："^7.1.1"，“开玩笑”："^24.8.0“

我的测试看起来：

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);
  });
});

我的组件看起来：

  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() });

我的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"
    ]
  }
}

这是我的第一次测试，我不知道为什么测试没有工作，请帮助！

谢谢

Answer 1

将此配置添加到package.json中：

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