NextJS 테스트 코드 작성하기 - 간단한 앱 만들면서 테스트 코드 작성 해보기

Test Driven Development 란 무엇인가요?

실제 코드를 작성하기 전에 테스트 코드를 먼저 작성합니다. 테스트 코드를 작성한 후 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성합니다

TDD를 하면 좋은 점

1. TDD를 하므로 인해 많은 기능을 테스트하기에 소스 코드에 안정감이 부여됩니다.
2. 실제 개발하면서 많은 시간이 소요되는 부분은 디버깅 부분이기에 TDD를 사용하면 디버깅 시간이 줄어들고 실제 개발 시간도 줄어듭니다.
3. 소스 코드 하나하나를 더욱 신중하게 짤 수 있기 때문에 깨끗한 코드가 나올 확률이 높습니다.

TDD 방식으로 카운터 버튼 앱 만들어보기

1. 해야 할 일 - 카운터는 0 부터 시작해야 됩니다.

2. 테스트 코드 작성

import React from "react";
import { render, screen } from "@testing-library/react";
import Counter from "@/app/counter";

describe("Counter 페이지 테스트", () => {
  it("카원터 페이지 렌더링", () => {
    render(<Counter />);
    const CounterElement = screen.getByTestId("counter");
    expect(CounterElement).toBe(0);
  });
});

 

3. 테스트 실행 - 실패

4. 테스트에 대응 하는 실제 코드 작성

"use client";
import { useState } from "react";

const CounterPage = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h3 data-testid={"counter"}>{count}</h3>
    </div>
  );
};

export default CounterPage;

5. 테스트 실행 - 실패

6. 테스트 코드 수정

import React from "react";
import { render, screen } from "@testing-library/react";
import Counter from "@/app/counter";

describe("Counter 페이지 테스트", () => {
  it("카운터 페이지 렌더링", () => {
    render(<Counter />);
    const CounterElement = screen.getByTestId("counter");
    expect(CounterElement).toHaveTextContent("0");  <- matcher 수정
});

플러스 & 마이너스 버튼 만들기

1. 해야 할 일 - + & - 버튼을 생성합니다.

2. 테스트 코드 작성

  it("마이너스 버튼", () => {
    render(<Counter />);
    const minusButton = screen.getByTestId("minus-button");
    expect(minusButton).toHaveTextContent("-");
  });

  it("플러스 버튼", () => {
    render(<Counter />);
    const plusButton = screen.getByTestId("plus-button");
    expect(minusButton).toHaveTextContent("+");
  });

3. 테스트 실행 - 실패

4. 테스트에 대응하는 실제 코드 작성

"use client";
import { useState } from "react";

const CounterPage = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h3 data-testid={"counter"}>{count}</h3>
      <button data-testid={"minus-button"} onClick={() => setCount(count - 1)}>
        -
      </button>
      <button data-testid={"plus-button"} onClick={() => setCount(count + 1)}>
        +
      </button>
    </div>
  );
};

export default CounterPage;

5. 테스트 성공

플러스, 마이너스 버튼 기능 넣기(fire event)

FireEvent API

FireEvent는 유저가 발생시키는 액션(이벤트)에 대한 테스트를 해야 하는 경우 사용합니다.

1. 해야할 일 - - 버튼을 누르면 count가 -1이 됩니다.

2. 테스트 코드 작성

it('마이너스 버튼 클릭시, count -1 ',  ()=> {
    render(<Counter />);
    const minusButton = screen.getByTestId("minus-button");
    const CounterElement = screen.getByTestId("counter");
    fireEvent.click(minusButton);
    expect(CounterElement).toHaveTextContent("-1");
  });

3. 실패 - 실패 사유 (구현된 코드 없음)

4. 테스트에 대응하는 실제 코드 작성

... 생략 ...
<button data-testid={"minus-button"} onClick={() => setCount((count)=>count - 1)}>
  -
</button>
... 생략 ...

5. 테스트 성공

6. 플러스 버튼도 동일하게 진행!

On/Off 버튼 만들기(toHaveStyle matcher 사용)

1. 해야 할 일 - on/off 버튼을 만드는데 이 버튼은 파란색으로 스타일을 주겠습니다.

2. 테스트 코드 작성

it('on/off 버튼 컬러는 파란색입니다. ',  () => {
    render(<Counter />);
    const onOffButton = screen.getByTestId("on-off-button");
    expect(onOffButton).toHaveStyle("background-color: blue");
 });

3. 실패 - 실패 사유(on/off 버튼 미구현)

4. 실제 코드 작성

... 생략 ...
<button data-testid={"on-off-button"} style={{ backgroundColor: "blue" }}>
   on/off
</button>
... 생략 ...

5. 성공

on/off 버튼 클릭 시 버튼 disabled

1. 해야 할 일 - on/off 버튼 클릭 시 +,- 버튼 disabled 속성 상태값 변경

2. 테스트 코드 작성

it("on/off 버튼 클릭시 +,- 버튼 disabled 속성 변경 ", () => {
    render(<Counter />);
    const onOffButton = screen.getByTestId("on-off-button");
    const minusButton = screen.getByTestId("minus-button");
    const plusButton = screen.getByTestId("plus-button");
    fireEvent.click(onOffButton);
    expect(minusButton).toBeDisabled();
    expect(plusButton).toBeDisabled();
  });

3. 실패 - 실패 사유 (코드 미구현)

4. 코드 구현

... 생략 ...	
<div>
  <h3 data-testid={"counter"}>{count}</h3>
  <button
    data-testid={"minus-button"}
    onClick={() => setCount((count) => count - 1)}
    disabled={onOff}
  >
    -
  </button>
  <button
    data-testid={"plus-button"}
    onClick={() => setCount((count) => count + 1)}
    disabled={onOff}
  >
    +
  </button>
  <button
    data-testid={"on-off-button"}
    style={{ backgroundColor: "blue" }}
    onClick={() => setOnOff(!onOff)}
  >
    on/off
  </button>
</div>
... 생략 ...

5. 성공

GitHub 전체 코드

Merge branch 'feature/to-be-disabled' into develop · guswls1846/nextjs-test@a79e316