[React] 리액트에서 tdd 개발하기 (with emotion)

 

만약 CRA를 통해서 리액트 프로젝트를 만들었다면 손쉽게 Test코드를 작성하는 것이 가능하다.

 

testing-libray/react 와 jest는 CRA를 통해 리액트 프로젝트를 만들었다면 이미 설치가 되어있을 것이고 emotion을 적용한 프로젝트에서 테스트 코드를 작성하기 위해서 @emotion/jest 라이브러리를 추가적으로 설치해준다.

npm install --save-dev @emotion/jest

 

 

이후 테스트 코드를 만들때 아래 항목을 추가하면 된다

import { matchers } from "@emotion/jest";

expect.extend(matchers);

 

 

@emotion/jest와 다른 테스팅 라이브러리를 비교할 때, @emotion/jest의 강점은 다음과 같다.

 

1. 간편한 구성: @emotion/jest는 간단하고 직관적인 구성을 제공합니다. 설정이 간단하고 사용하기 쉬우며, 테스트 코드를 작성하는 데 필요한 많은 부분을 자동으로 처리합니다.
2. 다양한 Matchers: @emotion/jest는 다양한 Matchers 함수를 제공하여 다양한 유형의 테스트를 수행할 수 있습니다. 예상한 결과와 실제 결과를 비교하고, 값의 일치 여부뿐만 아니라 객체나 배열의 내용까지 확인할 수 있습니다.
3. Snapshot Testing: @emotion/jest는 스냅샷 테스팅을 지원합니다. 스냅샷을 사용하면 특정 컴포넌트나 UI 요소의 렌더링 결과를 스냅샷 파일로 저장하고, 나중에 이 스냅샷 파일과 비교하여 변경 사항을 확인할 수 있습니다.
4. Mocking 기능: @emotion/jest는 모의 객체(Mocking)를 생성하고 테스트 중에 다른 모듈이나 함수와의 상호작용을 흉내낼 수 있습니다. 이를 통해 의존성을 가진 코드를 테스트할 때 외부 요소에 의존하지 않고도 테스트할 수 있습니다.
5. 커뮤니티와 지원: @emotion/jest는 Jest 테스팅 프레임워크를 기반으로 하고 있어서 널리 사용되고 있는 테스팅 라이브러리입니다. 따라서 풍부한 커뮤니티와 지원을 받을 수 있으며, 문제가 발생했을 때 도움을 얻기가 쉽습니다.

 

만약 tylecard라는 컴포넌트를 불러오고 싶다면 컴포넌트의 속성에 data-testid 를 추가해서 테스트를 할때 컴포넌트를 보다 쉽게 선택할 수 있도록 할 수 있다.

 

<TardCard data-testid="tylecard">

 

 

 

물론 해당 방법처럼 굳이 id를 직접 추가하지 않더라도 컴포넌트들을 선택할 수 있는 방법들은 정말 다양하다. 보통 요소들의 text속성을 정규표현식을 활용해서 가지고 오는 경우가 많은듯 하다.

 

즉, data-testid 를 활용해서 아래와 같이 컴포넌트를 가져오는것은 지양하도록 하자.

 

 

import React from "react";
import { render, screen } from "@testing-library/react";
import { matchers } from "@emotion/jest";

expect.extend(matchers);
import TyleCard from "components/Tyle/TyleCard";

describe("TyleCard 길이 테스트", () => {
  test("길이가 400px인 경우", async () => {
    render(<TyleCard width={"400"} />);
    const linkElement = await screen.findByTestId("tylecard");

    expect(linkElement).toHaveStyleRule("width", "400px");
  });

  test("길이가 700px인 경우", async () => {
    render(<TyleCard width={"700"} />);
    const linkElement = await screen.findByTestId("tylecard");

    expect(linkElement).toHaveStyleRule("width", "700px");
  });

  test("길이가 2000px인 경우", async () => {
    render(<TyleCard width={"2000"} />);
    const linkElement = await screen.findByTestId("tylecard");

    expect(linkElement).toHaveStyleRule("width", "2000px");
  });
});

 

 

위 코드에서는 toHaveStyleRule속성을 활용해서 width에 따라 반응형으로 만들어진 컴포넌트가 잘 작동하는지 확인해보았다.

 

 

 

이 외에도 다양한 JEST의 함수들을 활용해서 여러가지 테스트를 진행할 수 있다.

 

다양한 함수들의 기능은 아래 Jest공식문서에 자세히 나와있다!

 

https://jestjs.io/docs/using-matchers

Using Matchers · Jest