2024.07.12 프로그래머스 - React 동적 UI 개발 3

React 기반 동적 UI 개발 - 3

간단한 테스트

• 강의에서 Jest 를 이용한 FE 유닛 테스트 를 진행하였다.

테스트 방법

1. 컴포넌트 이름.spec.tsx 테스트 파일 생성
2. 테스트 코드 작성
   • @testing-library/react 에서 render, screen import
   • 실제 수행 코드와 가능한 같은 환경 구성

테스트 예시

• 테스트하려는 코드 : Title.tsx

    import React from "react";
    import styled from "styled-components";
    import { ColorKey, HeadingSize } from "../../style/theme";
      
    interface Props {
      children: React.ReactNode;
      size: HeadingSize;
      color?: ColorKey;
    }
      
    function Title({ children, size, color }: Props) {
      return <TitleStyle size={size}>{children}</TitleStyle>;
    }
      
    const TitleStyle = styled.h1<Omit<Props, "children">>`
      font-size: ${({ theme, size }) => theme.heading[size].fontSize};
      color: ${({ theme, color }) =>
        color ? theme.color[color] : theme.color.primary};
    `;
      
    export default Title;
  

  위 코드는 <BookStoreThemeProvider> 로 감싸져 있으므로 테스트 환경에서도 동일하게

  작성해주어야 한다.

• 테스트 코드 : Title.spec.tsx

    import { render, screen } from "@testing-library/react";
      
    import Title from "./Title";
    import { BookStoreThemeProvider } from "../../context/theme";
      
    describe("Title 컴포넌트 테스트", () => {
      it("렌더를 확인", () => {
        // 1. 렌더
        render(
          <BookStoreThemeProvider>
            <Title size="large" color="background">
              제목 테스트
            </Title>
          </BookStoreThemeProvider>
        );
      
        // 2. 확인
      
        expect(screen.getByText("제목 테스트")).toBeInTheDocument();
      });
      
      it("size prop 적용", () => {
        // 1. 렌더
        const { container } = render(
          <BookStoreThemeProvider>
            <Title size="large" color="background">
              제목 테스트
            </Title>
          </BookStoreThemeProvider>
        );
        expect(container.firstChild).toHaveStyle({ fontSize: "2rem" });
      });
      
      it("color prop 적용", () => {
        const { container } = render(
          <BookStoreThemeProvider>
            <Title size="large" color="primary">
              제목 테스트
            </Title>
          </BookStoreThemeProvider>
        );
        expect(container.firstChild).toHaveStyle({ color: "brown" });
      });
    });
  

테스트 스크립트 실행

• package.json

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "typecheck": "tsc --noEmit --skipLibCheck"
  },

• npm run test 스크립트(in bash) 에서 실행한다.