TDD(Test Driven Development)란?

실제 코드를 작성하기 전 테스트 코드를 먼저 작성하고,
그 테스트 코드를 패스할 수 있는 실제 코드를 작성하는 개발방식

테스트 코드 작성 > 테스트 실행 Fail > 테스트 코드에 맞는 코드 작성 > 테스트 실행 Pass

TDD의 장점

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

TDD를 사용하는데 도움을 주는 친구들

React Testing Library 공식문서링크

CRA로 리액트앱을 생성하면 기본적으로 테스팅할 때 React Testing Library를 사용하는 것을 볼 수 있으며,
CRA로 생성하지 않은 경우 아래와 같이 입력하여 추가할 수 있다.

npm install --save-dev @testing-library/react

React Testing Library는 React 구성요서 작업을 위한 API를 추가하여 Dom Testing Library 위에 구축된다.
Dom Testing Library는 Dom Node를 테스트하기 위한 아주 가벼운 솔루션이다.

또한 React Testing Library는 에어비앤비에서 만든 Enzyme을 대처하는 솔루션이다.
Enzyme은 구성요소의 구현 세부정보를 테스트를 하고,
React Testing Library는 React 애플리케이션의 사용자 입장에서 테스트한다.

Enzyme = 구현 주도 테스트(Implementation Driven Test)
React Testing Library = 행위 주도 테스트(Behavior Driven Test)

Jest

React Application을 테스트하기 위해서 React Testing Library와 함께 사용하는 Facebook에서 만들어진 테스팅 프레임워크.
최소한의 설정으로 돌아가며 Test Case를 만들어서 어플리케이션 코드가 잘 돌아가는지 확인해준다.
단위(Unit) 테스트를 위해서 이용한다.
React Testing Library와 마찬가지로 CRA로 앱을 생성했을 시 따로 설치할 필요가 없으며,
CRA로 생성하지 않은 경우 아래와 같이 입력하여 사용할 수 있다.

npm install jest --save-dev

Jest가 테스트 파일을 인식하는 방법은 아래와 같다
1. {filename}.test.js
2. {filename}.spec.js
3. 폴더 이름을 tests로 해놓고 내부에 파일 넣기

Jest 사용 방법

describe 안에 test(it)이 있는 형식

• describe
  argument(name,fn)
  여러 테스트를 그룹화하는 블록을 만든다.
• it (same as test)
  argument(name,fn,timeout)
  개별 테스트를 수행하는 곳.
  각 테스트를 작은 문장처럼 설명한다.
  expect().matcher()와 같은 형식으로 이뤄져있다.
  expect : 값을 테스트할 때마다 사용. 혼자서는 거의 사용되지 않으며 matcher와 함께 쓰임
  matcher : 다른 방법으로 값을 테스트하도록 사용한다.

describe("Product Controller create", () => {
	it("should have a createProduct function", () => {
    	expect(typeof productController.createProduct).toBe("function")
    })  
  	it("shoud call Product.create", async () => {
    	await productController.createProduct(req, res, next);
      	expect(ProductController.create).toBeCalledWith(newProduct);
    })
})

쿼리함수 공식문서링크

쿼리는 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법.
여러 유형의 쿼리("get", "find", "query")가 있다.
이들 간의 차이점은 요소가 발견되지 않으면 쿼리에서 오류가 발생하는지,
또는 Promise를 반환하고 다시 시도하는지의 여부이다.
선택하는 페이지 콘텐츠에 따라 다른 쿼리가 다소 적절할 수 있다.
공식문서의 Summary Table을 보면 각 쿼리의 차이를 자세히 알 수 있다.

ESLint Testing Plugins

eslint에서 기본으로 제공하지 않는 다양한 규칙을 플러그인을 통해 사용할 수 있다.
예를 들어 react 관련된 린트설정을 위해서는 eslict-plugin-react를 사용하면 되며,
react hooks에 관련된 규칙을 적용시켜주려면 eslint-plugin-react-hooks를 사용하면 된다.

eslint 설치

react app testing을 위해서는 아래와 같은 eslint plugin을 설치하면 된다

• eslint-plugin-testing-library : render로 Dom 그리는 부분
• eslint-plugin-jest-dom : expect-matcher로 테스트

npm install eslint-plugin-testing-library eslint-plugin-jest-dom --save-dev

eslint 내부설정

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

• plugins 항목 : 플러그인 추가할 때 기재, eslint-plugin- 부분 생략 가능
• extends 항목 : 플러그인을 추가한 후에 규칙을 정해줘야 사용 가능.
  그래서 extends 항목에 사용하고자 하는 규칙을 설정해야 하는데, react를 위한 규칙 recommended 라는 추천이 되는걸 사용

만약 규칙을 변경하고자 할 때는 rule 항목 추가

eslint 동작 확인

const lintTest = screen.getByRole('button', {
	name: 'lintTest'
});

expect(lintTest.testContent).toBe('lintTest');