사용자 지정 후크 반환 값을 시뮬레이션하려면 어떻게 해야 합니다.

사용자 지정 후크 반환 값을 시뮬레이션하려면 어떻게 해야 합니다.

커스텀 훅은 다음과 같습니다.

  export function useClientRect() {
    const [scrollH, setScrollH] = useState(0);
    const [clientH, setClientH] = useState(0);
    const ref = useCallback(node => {
      if (node !== null) {
        setScrollH(node.scrollHeight);
        setClientH(node.clientHeight);
      }
    }, []);
    return [scrollH, clientH, ref];
  }
}

나는 그것이 불려질 때마다 나의 가치를 돌려주길 원한다.예를 들어 다음과 같습니다.

jest.mock('useClientRect', () => [300, 200, () => {}]);

어떻게 하면 좋을까요?

후크를 모듈로 장착합니다.다음으로 모듈을 조롱합니다.

jest.mock('module_name', () => ({
    useClientRect: () => [300, 200, jest.fn()]
}));

mock은 test fn 밖의 파일 위에 호출해야 합니다.따라서 하나의 어레이만 조롱값으로 사용할 수 있습니다.

다른 테스트에서 다른 값을 사용하여 후크를 조롱하는 경우:

import * as hooks from 'module_name';

it('a test', () => {
    jest.spyOn(hooks, 'useClientRect').mockImplementation(() => ([100, 200, jest.fn()]));
    //rest of the test
});

이 답변에 추가되는 것은, 유저에 대해서,TS2339: Property 'mockReturnValue' does not exist on type에러 메시지이제 농담거리가 생겼다.Disculed Type defs(ts-jest/utils 포트)를 사용하여 시뮬레이션할 수 있는 함수mocked기능).

import useClientRect from './path/to/useClientRect';

jest.mock('./path/to/useClientRect');

const mockUseClientRect = useClientRect as jest.MockedFunction<typeof useClientRect>

describe("useClientRect", () => {
  it("mocks the hook's return value", () => {
    mockUseClientRect.mockReturnValue([300, 200, () => {}]);
    // ... do stuff
  });

  it("mocks the hook's implementation", () => {
    mockUseClientRect.mockImplementation(() => [300, 200, () => {}]);
    // ... do stuff
  });
});

음, 이것은 꽤 까다롭고 때때로 개발자들은 도서관으로 인해 혼란스러워 하지만 익숙해지면 그것은 식은 죽 먹기이다.몇 시간 전에 비슷한 문제에 직면했습니다.솔루션을 공유하면 쉽게 솔루션을 쉽게 도출할 수 있습니다.

커스텀 훅:

  import { useEffect, useState } from "react";
  import { getFileData } from "../../API/gistsAPIs";
    
  export const useFilesData = (fileUrl: string) => {
    const [fileData, setFileData] = useState<string>("");
    const [loading, setLoading] = useState<boolean>(false);
    useEffect(() => {
      setLoading(true);
      getFileData(fileUrl).then((fileContent) => {
        setFileData(fileContent);
        setLoading(false);
      });
    }, [fileUrl]);
    
    return { fileData, loading };
  };

내 모의 코드:테스트 기능 이외의 테스트 파일에 이 모크를 포함시켜 주세요.주의: mock의 반환 객체는 예상된 응답과 일치하므로 주의하십시오.

const mockResponse = {
  fileData: "This is a mocked file",
  loading: false,
};
jest.mock("../fileView", () => {
  return {
    useFilesData: () => {
      return {
        fileData: "This is a mocked file",
        loading: false,
      };
    },
  };
});

완전한 테스트 파일은 다음과 같습니다.

import { render, screen, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import FileViewer from "../FileViewer";

const mockResponse = {
  fileData: "This is a mocked file",
  loading: false,
};
jest.mock("../fileView", () => {
  return {
    useFilesData: () => {
      return {
        fileData: "This is a mocked file",
        loading: false,
      };
    },
  };
});

describe("File Viewer", () => {
  it("display the file heading", async () => {
    render(<FileViewer fileUrl="" filename="regex-tutorial.md" className="" />);
    const paragraphEl = await screen.findByRole("fileHeadingDiplay");
    expect(paragraphEl).toHaveTextContent("regex-tutorial.md");
  });
}

언급URL : https://stackoverflow.com/questions/60270013/how-to-mock-react-custom-hook-returned-value