JEST Custom Render

Render

DOM에 컴포넌트를 렌더링

...
render(<Options optionType="scoops" />);
...

function render(
  ui: React.ReactElement<any>,
  options?: {
    /* You won't often use this, expand below for docs on options */
  },
): RenderResult

Render Option Wrapper

provider로 부터 렌더링 하는 것을 래핑해 테스트 중 provider에 액세스 가능하게 한다.

• EX : router, reduex, context, theme …

...
render(<Options optionType="scoops" />, { wrapper: OrderDetailsProvider });
...

Custom Render

동일한 옵션을 가진 Render를 각 테스트마다 정의해서 사용하기 불편하기에 사용자가 본인 원하는 옵션에 맞게 설정하여 사용한다.

import { OrderDetailsProvider } from "../contexts/OrederDetails";
import { render } from "@testing-library/react";

//wrapper를 고정하고 다른 option은 비구조 할당을 통해 입력받기
const renderWithContext = (ui, options) =>
  render(ui, { wrapper: OrderDetailsProvider, ...options });

//@testing-library/react에서 사용하는 모든 메서드 내보내기
export * from "@testing-library/react";

export { renderWithContext as render };

• 위의 경로를 통해 가져와 사용한다.

import { render, screen } from "../../../test-utils/testing-library-utils";
import userEvent from "@testing-library/user-event";
import Options from "../Options";

// scoops 는 Options 컴포넌트 내에 있기에 최소한의 컴포넌트 만을 테스트하여 성능을 내도록 하자.
test("update scoop subtotal when scoops change", async () => {
  const user = userEvent.setup();
  render(<Options optionType="scoops" />);
...