[Testing] React + Testing Library + Styled Components 환경에서 ThemeProvider 적용 방법

오늘은 Styled Components + React 기반에서 testing-library/@react를 이용한 테스트 환경 구축 시 공통 theme 등의 사용으로 인한 에러 등을 피하기 위해서는 어떤 방식으로 셋팅 하여야 되는지 알아보도록 하겠습니다.

 

1. TestTemplate 작성

import { ThemeProvider } from "styled-components";
import useTheme from "@/libs/hooks/useTheme";

interface Props {
  children: JSX.Element | JSX.Element[];
}

const TestTemplate = ({ children }: Props) => {
  const [theme] = useTheme();
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};
export default TestTemplate;

가장 먼저 해야될 작업은 ThemeProvider로 감싸기 위한 테스팅 템플릿 입니다. 위의 코드에서 볼 수 있듯이 ThemeProvider에 테마를 바인딩 하고 하위에 자식 컴포넌트를 붙이는 모양으로 작성하시면 됩니다. 테마 프로바이더로 따로 감싸는 작업이 없으시면 Styled Components에서 공통 theme를 ${(props)=>props.theme.color} 이런 형식으로 사용하시게 되면 props가 없다고 에러를 리턴하기 때문에 위와 같은 작업을 하는것 입니다.

 

2. useRender 작성

import TestTemplate from "@/templates/TestTemplate";
import { render } from "@testing-library/react";

const useRender = (children: JSX.Element | JSX.Element[]) => {
  return render(<TestTemplate>{children}</TestTemplate>);
};

export default useRender;

테스트 템플릿으로만으로도 충분히 테스트 코드를 작성할 수 있지만, 매번 render()의 파라미터로 TestTemplate을 감싸는 작업을 하는게 너무나도 귀찮기 때문에 위와 같이 render의 결과를 반환하는 useRender를 작성해 줍니다.

 

3. 테스트 코드 작성

import Header from "@/components/base/Header";
import useRender from "./libs/useRender";

describe("<Header/>", () => {
  const header = (props = {}) => {
    
    const utils = useRender(<Header/>);

    const { getByText } = utils;
    const text = getByText("asdf");
    return {
      ...utils,
      text,
    };
  };

  it("matches snapshot", () => {
    const { container } = header();
    expect(container).toMatchSnapshot();
  });

  it("show the props correctly", () => {
    const { text } = header();
    expect(text).toBeTruthy();
  });
});

위와 같이 useRender를 이용하여 깔끔하게 작성해 주시면 됩니다. 이처럼 ThemeProvider를 이용하는 방법은 간단한 랩핑으로도 가능합니다.

 

테스트 환경 구축에 대한 정보는 이전에 제가 작성한 글(https://ryuhojin.tistory.com/41)을 참조해주시면 됩니다. 또한, 위의 글을 통해 작성한 코드가 궁금하다면 다음 github repository(https://github.com/ryuhojin/unje)를 참고하여주세요. test디렉토리와 src아래의 template을 참고하시면 됩니다. 제 코드가 많은 분들에게 도움 되었으면 좋겠습니다.