Title 컴포넌트 테스트 및 코드 설명

지금은 Title이라는 컴포넌트를 한 번 테스트를 해보려고 한다!

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} color={color}>
      {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;

요게 Title.tsx이고 이걸 Title.spec.tsx으로 테스트를 해보려고 하는데 어떻게 하냐면,

Title 컴포넌트 테스트 및 코드 설명

전체 구조

"Title 컴포넌트가 제대로 동작하는지 자동으로 확인하는 코드"

describe("Title 컴포넌트", () => {
  // 여기에 테스트들이 들어감
});

• describe: "이 컴포넌트에 대한 테스트들이야" 라고 묶어주는 거임
• 안에 여러 개의 it 테스트가 들어감

---

테스트 1: 렌더링 확인

it("렌더를 확인", () => {
  // 1. 렌더
  render(
    <BookStoreThemePrivider>
      <Title size="large">제목</Title>
    </BookStoreThemePrivider>
  );

  // 2. 확인
  expect(screen.getByText("제목")).toBeInTheDocument();
});

뭐 하는 거냐?

• render: Title 컴포넌트를 화면에 그림
• expect: "제목"이라는 텍스트가 화면에 있는지 확인
• 결과: 에러 안 나면 통과!

---

테스트 2: size props 적용 확인

it("size props 적용", () => {
  const { container } = render(
    <BookStoreThemePrivider>
      <Title size="medium">제목</Title>
    </BookStoreThemePrivider>
  );

  expect(container.firstChild).toHaveStyle("font-size: 1.5rem");
});

뭐 하는 거냐?

• size="medium" 넣었을 때
• 실제로 font-size: 1.5rem 스타일이 적용되는지 확인
• 결과: 스타일이 맞으면 통과!

---

테스트 3: color props 적용 확인

it("color props 적용", () => {
  const { container } = render(
    <BookStoreThemePrivider>
      <Title size="medium" color="primary">
        제목
      </Title>
    </BookStoreThemePrivider>
  );

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

뭐 하는 거냐?

• color="primary" 넣었을 때
• 실제로 color: brown (테마의 primary 색상) 적용되는지 확인
• 결과: 색상이 맞으면 통과!

---

왜 BookStoreThemeProvider로 감싸냐?

<BookStoreThemePrivider>
  <Title size="large">제목</Title>
</BookStoreThemePrivider>

Title 컴포넌트가 theme을 사용하니까!

• theme 없이 렌더하면 에러남
• 실제 사용 환경이랑 똑같이 만들어야 함

---

주요 함수들

render()

컴포넌트를 테스트용 화면에 그림

render(<Title>제목</Title>);

screen.getByText()

화면에서 특정 텍스트 찾기

screen.getByText("제목");  // "제목"이라는 글자 찾기

expect()

"이게 이래야 해!" 라고 확인

expect(A).toBeInTheDocument();  // A가 화면에 있어야 함
expect(A).toHaveStyle("color: red");  // A가 이 스타일 가져야 함

---

이거 왜 하냐?

1. 코드 수정해도 안심하고 수정 가능

// Title 컴포넌트 수정 후
npm run test  // 테스트 실행

// 통과하면 → 문제없음!
// 실패하면 → 뭔가 망가뜨림!

2. 협업할 때 유용

• 다른 사람이 코드 수정해도
• 테스트가 자동으로 확인해줌

3. 버그 미리 발견

• 배포 전에 문제 발견 가능

---

실행 방법

npm run test

결과:

✓ 렌더를 확인
✓ size props 적용
✓ color props 적용

Tests: 3 passed, 3 total

---

정리

• describe: 테스트 묶음
• it: 개별 테스트
• render: 컴포넌트 그리기
• expect: 제대로 동작하는지 확인

"자동으로 내 컴포넌트 검사해주는 코드"임!