0

以下是我的代码，其中包括带有 useEffect 的 fetch API(getData) 调用，一旦获得响应，它将使用 useState 将结果设置到 setData

我正在尝试为 useEffect 和 useState 编写测试用例，但它失败了，当我看到覆盖范围时，我得到了红色背景颜色，其中语句未涵盖 useEffect 块。

import { getData } from '../../api/data';

const [data, setData] = useState({});

  useEffect(() => {
    getData({ tableName }).then((response) => {
      try {
        if (response && response.result) {
          const result = Array.isArray(response.result)
            ? response.result[0]
            : response.result;
          const createDate = result.createdDate;
          result.name = result.firstName;
          result.submittedDate = `${createDate}`;
          result.attribute = Array.isArray(result.attribute)
            ? result.attribute
            : JSON.parse(result.attribute);
          setData(result);
        }
      } catch (error) {
        const errorObj = { error: error.message || 'error' };
        setData({ errorObj });
      }
    });
  }, []);

我尝试为上面的代码编写如下测试用例。

import React from "react";
import {
  shallowWithIntl,
  loadTranslation,
} from "../../../node_modules/enzyme-react-intl/lib/enzyme-react-intl";

import ParentPage from "ParentPage";
import ChildPage from "ChildPage";
import mockResponse from "mockData";
import { shallow, mount } from "enzyme";
import { act } from "react-dom/test-utils";


global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve(mockResponse),
  })
);

describe("ParentPage", () => {
  let useEffect;
  let wrapper;
  const mockUseEffect = () => {
    useEffect.mockImplementationOnce((f) => f());
  };

  beforeEach(() => {
    const defaultProps = {
      tableName: "tableName",
    };

    wrapper = shallowWithIntl(<ParentPage {...defaultProps} />);
    useEffect = jest.spyOn(React, "useEffect");
    mockUseEffect();
  });

  it("Should render", () => {
    expect(wrapper).toMatchSnapshot();
  });
  it("Compenent render", async () => {
    let wrapper;
    await act(async () => {
      const setWidgets = jest.fn();
      const useStateSpy = jest.spyOn(React, "useState");
      useStateSpy.mockImplementation([mockResponse, setWidgets]);
      wrapper = await mount(<ChildPage data={mockResponse} />);
     
      await act(async () => {
        wrapper.update();
      });
      console.log(wrapper);
    });
  });
});

但是当我尝试使用 npm run test 并检查覆盖率时，我仍然得到 useEffect 和 useState 未涵盖的语句。

我应该怎么做才能最大限度地实现覆盖？

4

0 回答 0