TDD의 장점/핵심 과정/RTL의 장점

TDD의 장점

- 무엇을 개발해야하는지, 무엇이 문제인지 명확히 알고 시작할 수 있다.

- 문제를 먼저 정의한 뒤 ---->> 문제의 해답을 찾아가는 루트라 할 수 있다.

- 완성된 코드가 문제없이 동작하는지 console.log() 등을 통해 알필요 없다.

- 코드 변경이 일어난 경우 또다시 console.log() 등을 통해 테스트할 필요 없다.

- 아무리 설계를 잘하고, 유연하게 짰다고 해도, 테스트 코드가 없다면 코드 변경을 주저하게 된다.

 

TDD의 핵심 과정

실패 (문제 정의, 테스트 코드를 실제코드보다 먼저 작성)

--->> 성공 (문제 해결, 테스트를 통과할 수 있는 최소한의 코드를 작성)

--->> 리팩토링 (불필요하고 비효율적인 코드를 개선한다.)

 

 

무엇을 테스트해야할까?

: 내가 만든 기능의 주요 핵심이 무엇인가 파악, 그 핵심에 집중

 

: React는 화면을 그려주는 라이브러리이고, 사용자에게 직접적으로 보여지는 부분이기 때문에 Presentational Component가 중요하게 테스트되어야 한다.

 

예를 들면..

1. props가 잘 받아져왔는가?

2. state가 의도한대로 잘 관리되고 있는가?

3. props나 state를 토대로 component가 잘 rendering되고 있는가?

4. event handler가 잘 작동하는가?

5. lifecycle에 맞게 동작하는가?

 

 

 

 

+ React-Testing-Library의 장점 (cf. Enzyme)

• 모든 테스트를 DOM 위주로 진행한다.
• 컴포넌트의 props나 state를 조회하지 않는다. (그보다 화면에 무엇이 보이는가, output이 무엇인가에 초점)
• 컴포넌트 내부 구현 방식이 바뀌더라도, 컴포넌트 기능이 똑같다면 테스트가 실패하지 않도록 설계되어 있다. 즉, 리팩토링을 하더라도 테스트가 깨지지 않는다.
• 정말 필요한 기능만 지원해줘 light하다.

 

 

참고사이트

shylog.com/tdd-in-react-using-react-testing-library/