Jest에서 반응 구성 요소를 조롱하는 방법

이전에 Jest에서 React 구성 요소를 모의하는 방법에 대한 글을 작성한 적이 있습니다check to make sure that the component was passed specific props. 때때로 소품을 확인할 필요가 없다는 것을 알았습니다. 구성 요소가 페이지에 있는지 확인하려는 경우가 많습니다.


이 문서는 https://robertmarshall.dev/blog/how-to-mock-a-react-component-in-jest/에 처음 게시되었으며 최신 정보입니다.


이 글은 Jest에서 React 구성 요소를 간단히 조롱하는 방법에 대한 예를 제공합니다. 기본 구성 요소와 명명된 내보낸 구성 요소를 다룹니다.

구성 요소 자체는 제3자에 의해 테스트되므로 테스트가 필요하지 않거나 이미 다른 테스트 파일에서 테스트되었습니다. 가져온 구성 요소를 모킹하여 테스트의 복잡성을 줄이고 가장 간단한 형태로 분해할 수 있습니다.

예시

TopLevelComponent 및 Modal 두 가지 구성 요소가 있습니다. TopLevelComponent는 열기의 소품을 가져갈 수 있습니다. open이 true로 설정되면 Modal가 표시됩니다. 테스트는 Modal 내부를 조롱하는 것을 원하지 않습니다. Modal가 렌더링되는지 여부를 테스트하고 싶습니다.

import React from "react";
import Modal from "./Modal";

const TopLevelComponent = ({ open }) => (
  <>
    <p>Some other content to render...</p>
    {open && <Modal />}
  </>
);

export default TopLevelComponent;

완전한 테스트

Jest 내에서 React 컴포넌트를 조롱하려면 jest.mock 함수를 사용해야 합니다. 특정 구성 요소를 내보내는 파일은 조롱되고 사용자 지정 구현으로 대체됩니다. 구성 요소는 기본적으로 함수이므로 모의 객체도 함수를 반환해야 합니다. 위의 예에서 이어지는 테스트는 다음과 같습니다.

import React from "react";
import { render } from "@testing-library/react";
import TopLevelComponent from "./TopLevelComponent";

jest.mock("./Modal", () => () => {
  return <mock-modal data-testid="modal"/>;
});

test("If TopLevelComponent is passed the open prop Modal is rendered", () => {
  const { queryByTestId } = render(<TopLevelComponent open />);
  expect( queryByTestId("modal") ).toBe(true)
});

test("If TopLevelComponent is not passed the open prop Modal is not rendered", () => {
  const { queryByTestId } = render(<TopLevelComponent />);
  expect( queryByTestId("modal") ).toBe(false);
});

그러나 내 구성 요소는 명명된 내보내기입니다.

위의 예에서는 기본 내보낸 함수를 사용합니다. 파일에서 내보낼 기본 항목입니다. 그러나 명명된 내보내기일 때 구성 요소를 어떻게 조롱합니까? 즉 – 그러나 파일의 명명된 내보내기인 React 구성 요소를 어떻게 조롱합니까?

import React from "react";
import { Modal } from "./ManyModals";

const TopLevelComponent = ({ open }) => (
  <>
    <p>Some other content to render...</p>
    {open && <Modal />}
  </>
);

export default TopLevelComponent;

고려해야 할 몇 가지 사항이 있습니다. ES6 모듈입니까? 아래의 첫 번째 예는 그렇지 않으며 약간 더 간단합니다.

jest.mock("./ManyModals", () => ({
  Modal: () => {
    return <mock-modal data-testid="modal"/>;
  },
}));

그러나 ES6 모듈로 작업하는 경우 다음을 수행해야 합니다.

jest.mock("./ManyModals", () => ({
  __esModule: true,
  Modal: () => {
    return <mock-modal data-testid="modal"/>;
  },
}));

올바른 소품이 설정되었는지 확인하는 이 방법은 단위 테스트를 크게 단순화했습니다. React 구성 요소가 React Testing Library를 사용하여 올바르게 소품을 통과했는지 Jest Test가 자주 필요하며 이러한 처리 방법은 빠르고 깨끗합니다.

소품 테스트는 어떻습니까?

나는 Check React Component Props are Passed to Child in Jest Unit Test에 그것에 대해 또 다른 글을 썼습니다. 조금 더 복잡한 React 구성 요소를 조롱하는 방법을 보여줍니다.

더 많은 React 및 Jest 힌트와 팁을 보려면 React Category 및 Jest Testing Category 을 살펴보십시오!

이 기사가 도움이 되었길 바라며 질문이 있는 경우 다음 주소로 저에게 연락할 수 있습니다.