13-5 컴포넌트 테스트

13-5 컴포넌트 테스트

컴포넌트 테스트

---

단순하더라도 공용으로 사용되는 컴포넌트 일수록 테스트가 중요합니다.
참여자가 늘어나거나, 프로젝트가 확장될수록 props의 양도 늘어나고, 렌더방식이 바뀔수도 있기때문.

React Testing Libray

CRA 방식으로 React 프로젝트를 생성할 때 함께 설치되어있습니다.

• 컴포넌트가 잘 나오는지 (렌더)
• 기능이 잘 동작하는지
• 리팩토링시 이상이 없는지

테스팅 라이브러리를 가져오기
import { render, screen } from "@testing-libray/react";

import { render, screen } from '@testing-library/react'

import Title from "./Title";
import { BookStoreThemeProvider } from '../../context/themeContext';

describe("Title 컴포넌트 테스트", () => { // 테스트를 실행할 컴포넌트의 테스트 그룹
    it('렌더를 확인', () => {
        // 1 렌더
        render(
            <BookStoreThemeProvider>
              <Title size="large">제목</Title>
            </BookStoreThemeProvider>
        );

        // 2 확인 - select하는 요소가 문서내에 있는지
        expect(screen.getByText('제목')).toBeInTheDocument(); // 제목을 제목2로 바꾸면 fail처리 됨
    });

    it('size props 적용', () => {
        const {container } = render(
            <BookStoreThemeProvider>
              <Title size="large">제목</Title>
            </BookStoreThemeProvider>
        );
        expect(container?.firstChild).toHaveStyle({fontSize: "2rem"});
    });

    it('color props 적용', () => {
        <BookStoreThemeProvider>
        <Title size="large">제목</Title>
      </BookStoreThemeProvider>
    });

    expect(container?.firstChild).toHaveStyle({color: "brown"});
});