[React] 🛠React에서 TDD 하는 방법

▷ TDD란?

Test-driven Development

테스트를 먼저 작성하고 테스트 통과 여부를
확인하며 개발하는 소프트웨어 개발 방법론을 말한다.

TDD를 통해 소프트웨어를 개발한다는 것은
작은 단위의 테스트 케이스를 작성하고, 이를 통과하는
코드를 작성하는 과정을 반복하는 것을 의미한다.

때문에 예상하지 못했던 버그를 줄여줄 수 있다.

TDD의 개발 주기 3단계
⒈ Write Failing Test - 실패하는 테스트 코드를 먼저 작성
⒉ Make Test Pass - 테스트 코드를 성공시키기 위한 실제 코드를 작성
⒊ Refactor - 중복 코드 제거, 일반화 등의 리팩토링을 수행

❗️TDD의 장단점

장점	단점
코드의 신뢰성 향상	개발 초기 단계에 시간과 노력을 많이 소비
버그를 일찍 발견하여 더 적은 수정 비용 발생	테스트 코드 작성과 유지보수 비용이 추가됨
코드 수정 시 기존 코드의 문제를 방지하는 효과	일부 복잡한 상황에서 테스트 작성이 어려울 수 있음
설계와 기능에 대한 명확한 이해도 향상	개발자의 습관과 능력에 따라 질적인 차이 발생 가능
자동화된 테스트로 코드 작성과 동시에 코드 품질을 유지할 수 있음	테스트를 작성하기 위한 프레임워크와 도구에 대한 추가 학습이 필요

---

▷ React에서 테스트하기

React에서 테스트는 Testing Library, Jest를 이용해서 할 수 있다.
서로 역할이 다르기 때문에 두 개를 다 사용하여 테스트를 하는 것이 좋다.

Testing Library
사용자 중심 테스트(User-Centered Testing)를
강조하는 JavaScript용 테스팅 유틸리티 라이브러리

Jest
빠르고 쉽게 사용할 수 있는 JavaScript 테스팅 프레임워크,
테스트 파일을 자동으로 찾아 실행하고, 결과를 비교하여
성공 또는 실패로 판단하는 등 다양한 기능을 제공

🛠 start!

CRA로 리액트 폴더 생성

/* package.json */
// CRA로 리액트 폴더를 생성하면, testing을 따로 설치하지 않아도 됨
"dependencies": {
    "@testing-library/jest-dom": "^5.16.5", // jest-dom에서 제공하는 custom matcher를 사용할 수 있게 해줌
    "@testing-library/react": "^13.4.0", // 컴포넌트의 요소를 찾기 위한 query가 포함되어 있음
    "@testing-library/user-event": "^13.5.0", // click 등 사용자 이벤트에 이용됨
  },

---

🛠 테스트 파일 확인

test 함수, expect 함수는 Jest의 함수이다.
toBeInTheDocument는 jest-dom 라이브러리에 포함된 Custom matchers이다.

/* App.test.js */
import { render, screen } from '@testing-library/react';
import App from './App';

// test 함수의 첫 번째 인자는 설명을 작성
// 두번째 인자는 하고자 하는 테스트를 함수의 형태로 넣는다.
test('renders learn react link', () => {
  render(<App />); // react-testing-library에서는 테스트를 진행할 컴포넌트를 render()함수의 인자로 전달한다.
  const linkElement = screen.getByText(/learn react/i); // screen의 다양한 메소드 중 getByText() 메서드를 이용하여 render()에서 가져온 App 컴포넌트 중 "learn react"라는 문자열이 있는지 확인하여 linkElement에 할당하고 있다.
  expect(linkElement).toBeInTheDocument(); // expect 함수의 인자로 지정한 요소가 document.body에 존재하는지 toBeInTheDocument 함수(matchers 함수)를 사용하여 체크하고 있다.
});

---

🛠 간단한 테스트 만들기

src폴더에 Example.test.js 파일을 작성
(테스트를 실행하기 위해서는 파일명을 <파일명>.test.js로 작성하면 됨)

describe 함수 블록은 Test Suites라고 불리며
test it 함수 블록은 Test(Test Case)라고 한다.

/* Example.test.js */
/* <파일명>.spec.js으로 작성해도 됨 */
test("2 더하기 2는 4", () => {
  expect(2 + 2).toBe(4);
});
// test 함수 대신 it 함수를 사용해도 같은 결과가 나온다.

-------
// describe함수를 사용하면 it함수나 test함수를 하나의 파일에 여러 개 포함할 수 있다.
describe("간단한 테스트들", () => {
  test("2 더하기 2는 4", () => {
    expect(2 + 2).toBe(4);
  });

  it("2빼기 1은 1", () => {
    expect(2 - 1).toBe(1);
  });
});

---

🛠 직접 만든 컴포넌트 테스트

컴포넌트 만들기

src폴더에 components폴더를 생성하고
Light.jsx 파일을 작성한 후, App.test.js 파일은 삭제

/* Light.jsx */
import { useState } from "react";

// 전원의 상태를 OFF에서 ON으로 전환하는 컴포넌트
function Light({ name }) {
  const [light, setLight] = useState(false);

  return (
    <div>
      <h1>
        {name} {light ? "ON" : "OFF"}{" "}
      </h1>
      <button onClick={() => setLight(true)} disabled={light ? true : false}>
        ON
      </button>
      <button onClick={() => setLight(false)} disabled={!light ? true : false}>
        OFF
      </button>
    </div>
  );
}

-------
/* App.js */
import "./App.css";
import Light from "./components/Light";

function App() {
  return <Light name="전원" />;
}

---

컴포넌트 테스트하기

compoents 폴더 아래에 Light.test.js 파일 작성

import { render, screen } from "@testing-library/react";
import Light from "./Light";

// PASS
it("renders Light Component", () => {
  render(<Light name="전원" />);
  const nameElement = screen.getByText(/전원 off/i);
  expect(nameElement).toBeInTheDocument();
});

// PASS
it("off button disabled", () => {
  render(<Light name="전원" />);
  const offButtonElement = screen.getByRole("button", { name: "OFF" });
  expect(offButtonElement).toBeDisabled(); // getByRole과 Disabled사용
});

// PASS
it('on button enable', () => {
  render(<Light name="전원" />);
  const onButtonElement = screen.getByRole('button', { name: 'ON' });
  expect(onButtonElement).not.toBeDisabled(); // not을 사용
});

fireEvent를 사용하여 버튼 클릭
이벤트의 유무도 테스트로 구현할 수 있다.

// fireEvent 가져오기
import { fireEvent, render, screen } from '@testing-library/react';
import Light from './Light';

it('change from off to on', () => {
	render(<Light name="전원" />);
	const onButtonElement = screen.getByRole('button', { name: 'ON' });
	fireEvent.click(onButtonElement); // fireEvent의 click메서드에 전달인자로 테스트하고자 하는 요소를 전달한다.
	expect(onButtonElement).toBeDisabled();
})

👉 최근 이용률↑ 테스트 프레임워크인 Vitest 보러가기