Question

我是全栈客栈的新手，才刚刚完成了为前端组件编写单元测试的任务。我从最基本的渲染测试开始，但是我已经遇到了问题。您会看到我们正在使用Material UI进行样式设置，特别是Fuse样式。我的may组件是FusePageCarded组件，它有一个子组件FuseScrollBars。该滚动条组件使用一个名为mobile-detect的程序包，该程序包使用window.navigator.userAgent作为参数来查看用户所使用的设备类型。现在很明显，浅色渲染将不会有窗口，因为它没有在浏览器中运行，因此测试失败，因为未定义窗口。过去是否有人在Fuse的组件上遇到过类似的问题，或者是否有人对如何绕过此问题有任何想法？我的测试代码如下。谢谢。

import React from "react";
import enzyme, { shallow } from "enzyme";
import Patients from "../Patients";
import * as PatientTypes from "../../PatientTypes";
import adapter from "enzyme-adapter-react-16";
import configureStore from "redux-mock-store";

enzyme.configure({ adapter: new adapter() });

describe("Patients Component", () => {
  const initialState = {
    currentDaysNo: 1,
    hypertensiveState: "All",
    patientType: PatientTypes.PATIENT_TYPE_1.patientType,
    patientStatus: "All",
    pulseOx: "all",
    heartRateState: "all",
    clinic: "all",
    pageNo: 1,
    pageSize: 25,
    order: "asc",
    orderBy: null,
    searchText: ""
  };
  const mockStore = configureStore();
  let container;
  let store;

  beforeEach(() => {
    store = mockStore(initialState);
    container = shallow(<Patients store={store} />);
  });

  test("renders", () => {
    expect(container.length).toEqual(1);
  });
});

期望结果为1，但是浅色渲染甚至在进行测试之前就失败了。

由于组件试图检查window.navigator.userAgent

0 个答案: