[Jest] React - Jest Use CustomProvider, useEvent Example

Jest Test Provider 주입 하는 방법

1. render 시에 직접 주입한다.

• option으로 wrapper로 Provider를 주입한다.

ex) gugbab.test.tsx

import { render, screen } from "@testing-library/react";
...


test("gugbab1 상품 개수 증가후 가격 계산 테스트", async () => {
  render(<Type orderType="products" />, { wrapper: OrderContextProvider });
  ...
 }

 

2. customRender를 사용한다.

• Provider를 주입 받는 util render를 만들어 해당 render를 사용

ex) render-utils

import { render } from "@testing-library/react";
import { OrderContextProvider } from "./contexts/OrderContext";

const customRender = (ui, options) =>
  render(ui, { wrapper: OrderContextProvider, ...options });

export * from "@testing-library/react";

export { customRender as render };

ex) gugbab.test.tsx

import { render, screen } from "../../../render-utils";
...


test("gugbab1 상품 개수 증가후 가격 계산 테스트", async () => {
  render(<Type orderType="products" />);
  ...
}

 

 

Jest Text Example

• describe
  • 비슷 한 테스트를 묶을때 사용한다.
• useEvent 
  • 이벤트를 테스트 할때 사용한다.
  • userEvent.type사용하기전userEvent.clear를 해주는것이 좋다.
    • 등록된 이벤트 핸들러를 제거하여 테스트 중에 예기치 않은 동작이 발생하는 것을 방지하기 위해서이다.

ex) gugbab.test.tsx

// 비슷 한 테스트를 묶을떄 사용
describe("상품과 옵션 총 가격 구하는 테스트", () => {
  test("상품 증가이후 총 가격 확인 테스트", async () => {
    render(<OrderPage />);

    const total = screen.getByText("Total Price:", { exact: false });
    expect(total).toHaveTextContent("0");

    const gugbab1Input = await screen.findByRole("spinbutton", {
      name: "gugbab1",
    });

    // 등록된 이벤트 핸들러를 제거하여 테스트 중에 예기치 않은 동작이 발생하는 것을 방지하기 위해서
    userEvent.clear(gugbab1Input);
    userEvent.type(gugbab1Input, "1");

    expect(total).toHaveTextContent("1000");
  });

  test("옵션 증가이후 총 가격 확인 테스트", async () => {
    ...
  });

  test("상품과 옵션을 변경시 총가격 테스트", async () => {
    ...
  });
});