[React] TDD (Test Driven Development)

TDD

실제 코드를 작성하기 전 테스트 코드를 먼저 작성하고, 그 테스트 코드가 패스될 수 있는 실제 코드를 작성한다.

TDD의 장점

• 많은 기능을 테스트하기에 소스 코드의 디테일이 높아지면서 클린 코드를 만들 확률이 높아짐
• 실제 개발하면서 많은 시간이 소요되는 디버깅 시간과 실제 개발 시간이 줄어듬

---

React Testing Library

npx create-react-app 으로 리액트 앱을 생성하면 테스팅 할 때 React Testing Library를 사용한다.

React Testing Library는 리액트 컴포넌트를 테스트하는 라이브러리로, 실제 DOM을 사용해 컴포넌트를 렌더링한다. 

 

이전에는 에어비앤비에서 만든 Enzyme를 사용했는데 이는 구현 주도 테스트(Implementation Driven Test)라고 접근 방식이 좀 다르다. 깊게 들어가진 않았지만, 구현 주도 테스트의 경우 코드의 내부를 집중적으로 테스트하는 반면 행위 주도 테스트는 사용자의 시각에서 테스트를 한다.

---

Jest

페이스북에서 만든 테스트 프레임 워크

최소한의 설정으로 동작하며 테스트 케이스를 만들어 코드가 잘 돌아가는지 확인한다.

npm install jest --save-dev

리액트 앱을 설치할 때 이미 설치가 돼서 따로 하지 않아도 된다.

 

describe(name, fn()) 형태로 되어 있는데 여러 테스트를 그룹화 하는 블록이다.

코드 안을 보면 it (name, fn(), timeout)과 같은 형태로 각 테스트를 간단한 문장으로 설명했다.

 

테스트 코드의 제일 아래 부분에는 다 똑같이 expect, toBe 로 나누어져 있다.

expect는 테스트의 예상 결과를 표현하는 함수, toBe로 표현되는 matcher는 예상 결과와 실제 결과를 비교해 테스트를 수행하는 함수다. 

expect(value).toBe(expectedValue);

위 코드에서 value는 실제로 테스트하려는 값이고, expectedValue는 예상 결과다.

matcher로 toBe만 있는 것은 아니고 toEqual(값이 expect와 같은지), toBeFalsy(값이 거짓으로 평가되는지) 등 여러 가지가 있다.

---

TDD 실행과 쿼리 함수

npm run test를 실행하고 a를 누르면 모든 테스트가 진행, q를 누르면 테스트가 종료된다.

리액트를 설치하고 보면 App.test.js라는 파일이 생성되어 있는데, 여기에 테스트 케이스가 작성되어 있다.

 

테스트를 하려면 먼저 찾는 부분이 있는지 없는지 알아보기 위해 렌더링을 한 번 해야 한다. (render란 돔에 컴포넌트를 렌더링하는 함수)

 

learn react라는 문구가 문서 안에 있는지 테스트를 하려고 한다.

왼쪽에 실제로 Learn React라는 문구가 있기 때문에 테스트는 통과된다.

 

screen.getByText라고 적혀 있는 부분은 뭔지 궁금하다.

 

screen은 실제 돔에 접근하고 컴포넌트를 검색하는 도구다. 위에서 말했던 것처럼 사용자 시각에서 애플리케이션을 테스트하기 때문에, 실제 렌더링된 컴포넌트와 상호작용을 하기 위해 screen이라는 객체를 사용한다. 

 

getByText는 screen 객체에 있는 하나의 함수로, 특정 텍스트를 포함한 돔 요소를 선택하는 역할을 한다.

그래서 learn react라는 문구가 있는 돔 요소를 선택해 linkElement 변수에 할당한 것이고, 할당된 변수가 문서 안에 있는지 테스트해 통과된 것이다.

 

getByText 외에도 페이지에서 특정 요소를 찾기 위해 테스트 라이브러리가 제공하는 쿼리 함수들이 여럿 있다.

getBy... queryBy... findBy 등 여러 유형이 있는데 각자 특징이 달라서 선택하는 테스트 유형에 맞게 적절하게 사용해야 한다.

 

이 때 내가 쓴 matcher가 올바른지 확신이 서지 않을 때 도와주는 모듈들이 있다.

Prettier랑 ESLint다.

---

모듈 설치

Prettier는 코드 형식을 맞추는 코드 포맷터 역할을 한다.

VSC의 익스텐션에서 간단하게 설치할 수 있다.

 

ESLint는 문법 오류를 잡아주는 라이브러리다.

먼저 package.json에서 아래 부분을 잘라낸다.

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

 

.eslintrc.json을 만들어 아래 코드를 붙여넣는다.

{
    "extends": [
      "react-app",
      "react-app/jest"
    ]
}

 

다음에 플러그인을 설치해야 한다.

플러그인을 설치하면 ESLint에서 기본으로 제공하지 않는 다른 규칙들을 사용할 수 있다.

npm install eslint-plugin-testing-library / eslint-plugin-jest-dom

testing-library는 렌더로 돔을 그리는 부분이고, jest-dom은 expect-matcher로 테스트하는 부분이다.

즉 기본으로 제공하는 규칙들과 더불어 돔을 그리는 부분과 expect-matcher 부분의 문법 교정을 받을 수 있다.

 

{
  "plugins": ["testing-library", "jest-dom"],
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended"
  ]
}

최종적으로 .eslintrc.json은 이런 내용이 담겨 있다.

plugin 항목에는 추가한 플러그인을 넣어주고, extends에는 규칙을 정해준다.

 

react를 위한 규칙을 설정하면서 recommended(추천하는 것)를 넣어준다.

이러면 matcher를 쓸 때 플러그인이 이게 더 적절해! 하고 추천을 해준다.