TDD

Test-Driven Development

테스트 프레임워크 등을 사용하여 자동화된 테스트 시스템에서 미리 정의된 사양을 바탕으로 실패하는 테스트 명세를 작성하고 그 테스트 명세를 통과하기 위한 최소한의 코드를 작성하고 해당 코드를 리팩토링하는 것으로 개발을 마치는 프로세스다. 다시 말해 먼저 자동화된 테스트 코드를 작성한 후 테스트를 통과하기 위한 코드를 개발하는 방식의 개발 방식을 말한다. 서비스를 안정적으로 운영하고 서비스의 품질을 유지하기 위해서는 테스트 코드 작성이 필수적이다.

Jest

페이스북에서 개발, 관리하는 자바스크립트 테스트 프레임워크로써 단순함에 집중한 프레임워크이다. Jest는 자바스크립트 프레임워크이므로 리액트 이외에 Typescript, Node, Angular, Vue 등에서도 사용할 수 있다.

Jest외에도 Mocha, Jasmine, Karma 등이 있지만 Jest를 사용하는 이유는 리액트를 개발, 관리하는 기업인 페이스북에서 만들었고 리액트를 설치하면 기본적으로 Jest도 함께 설치되기 때문이다.

장점

1. 제로 설정 (zero config)

2. 스냅샷

   : 값 확인이 어려운 큰 오브젝트를 그대로 저장한 후 추후에 값이 변경되면 에러를 표시하는 스냅샷 기능을 제공

3. 모의객체

   : 테스트 범위를 벗어나는 객체를 간단하게 모의 객체로 만듦으로써 실제로 테스트해야 할 부분을 집중해서 테스트 가능

4. 테스트 코드의 분리

   : 분리된 테스트를 제공하는 Jest는 테스트 코드를 동시에 실행하여 빠른 성능 제공

5. 간단한 API

@testing-library/react

DOM 테스팅 라이브러리이다. 사용자 중심 방식으로 UI 컴포넌트를 테스트하는 데 도움을 준다.

Jest는 자바스크립트 테스트 프레임워크로 자바스크립트를 전반적으로 테스트하기 위한 프레임워크이다. 리액트도 자바스크립트이기는 하지만, JSX를 사용하고 있으므로 일반적인 자바스크립트는 아니다. 또한 리액트의 JSX는 HTML의 DOM을 다루기 때문에 단순한 자바스크립트의 테스트로 정확한 오류를 잡아내기는 어렵다.

장점

• 유지보수가 가능한 리액트 컴포넌트용 테스트 코드 작성 가능
• 실제 DOM 노드에서 작동하므로 더 신뢰할 수 있는 테스트를 할 수 있다.
• 사용자 중심의 테스트 유틸리티 제공
  • 텍스트로 폼(Form)의 요소를 찾거나 텍스트에서 링크 및 버튼 등ㅇ을 찾는 테스트 코드는 마치 사용자가 화면을 보면서 찾는 것과 같은 형태로 테스트 코드를 작성할 수 있도록 돕는다.

---

테스트 환경 설정

jest 설치

npm install --save-dev jest

EsLint설정

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

react-testing-library 설처

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

npm install --save-dev typescript @types/node @types/react @types/react-dom @types/jest

명령어 수정

/** package.json */
"script": {
	"test": "jest --watch"
}

테스트 파일 생성

Jest는 파일 확장자가 .test.js 또는 .test.ts로 끝나는 파일들을 테스트 파일로 인식하고 해당 파일을 실행한다.

App.tsx 파일의 테스트 파일을 생성 App.test.ts

---

Jest

describe(’test.tsx’, ()=> {
	/** callback */
	it('sums 1 + 2 to equal 3', ()=>{
		expect(sum(1, 2)).toBe(3);
	});
});

describe

• jest가 제공하는 함수
• 여러 테스트를 한 그룹으로 묶고 설명을 붙이기 위해 사용
• 첫 번째 매개변수: 명령 프롬프터에 표시할 설명
• 두 번째 매개변수: 여러 테스트를 그룹으로 묶을 콜백 함수

it

• 실제 테스트가 실행되는 테스트 명세를 작성할 때 사용
• 첫 번째 매개변수: 테스트명세 설명
• 두 번째 매개변수: 실제로 테스트를 실행하는 테스트 코드 작성

---

Matcher

: jest가 제공하는 함수로써 결과값을 비교하여 테스트의 성공 여부를 판단할 때 사용한다.

1. toEqual

   : 오브젝트를 비교할 때 사용

   • js에서는 오브젝트의 내용이 같아도 다른 값으로 인식
   • 단순히 person 함수를 통해 생성한 갑과 toEqual에서 사용한 값을 단순히 비교 연산자(===)를 사용하면 다른 값이라고 판단
   • jest에서 오브젝트를 테스트할 때 사용

expect(person('kim', 20)).toEqual({
	name: 'kim',
	age: 20
});

1. toBeTruthy, toBeFalsy

   : boolean을 체크할 때 사용

2. toggle

   : 전달받은 매개변수의 반대 값을 반환하는 함수

describe('test index.js file', () => {
	...
	it('return false', () => {
		expect(toggle(true)).toBeFalsy();
		expect(toggle(true)).not.toBeTruthy();
	})
});

1. toContain

   : 배열에 특정값이 포함되어 있는지 확인

2. range

   : 배열에 시작과 끝값을 전달받아서 배열을 만들어 반환하는 함수

describe('test index.js file', () => {
	...
	it('has 2', () => {
		expect(range(1, 3)).toContain(2);
	});
});

더 많은 matcher들이 궁금하다면

https://jestjs.io/docs/expect

코드 커버리지(Code coverage)

테스트 대상이 되는 소스 코드 중 테스트 코드를 통해 검증된 코드의 비율을 의미하며, 테스트 수행 결과를 정량적으로 나타내는 수치이다.

테스트 코드가 작성되지 않은 코드를 확인 할 수 있다.

• 코드 커버리지 확인 npx jest --coverage
  

---

@testing-library/react

render

리액트 컴포넌트를 화면에 표시

screen

리액트 컴포넌트가 표시된 화면

💡 render 함수는 메모리상에 돔을 만들고 screen을 통해 해당 돔에 접근

container

리액트 컴포넌트에서 화면에 표시되는 부분을 담고 있는 오브젝트

---

TDD 순서

1. 개발할 컴포넌트의 기능 분석
2. 테스트 명세 작성