TDD란?
TDD는 Test-Driven Development의 약자로, 테스트 주도 개발이라 한다.
개발을 한 후에 테스트하는 방식이 아닌, 테스트를 한 후에 개발하는 방식을 말한다.
설계 -> 코드 개발 및 테스트 케이스 작성 (X)
테스트 케이스 작성 -> 코드 개발 및 리팩토링 (O)
TDD를 해야하는 이유
- 코드를 수정 또는 기능을 추가할 때 빠르게 검증할 수 있다.
- 코드를 깔끔하게 작성할 수 있다.
- 개발이 끝나면 우리는 테스트 코드를 작성하는 데 시간을 들이고싶지 않다.
TDD를 한다는 것은 곧, 테스트 코드를 먼저 작성해야 한다는 것이다.
우리가 늘 하던 코드 개발 후에 테스트 코드를 작성하는 것보다 테스트 코드를 먼저 작성하는 이유가 TDD를 해야하는 이유와 동일하다.
테스트 코드를 작성하면서는 개발이 더뎌지고 귀찮은 느낌을 받을 수 있으나, 장기적으로 보았을 때 코드를 깔끔하게 작성할 수 있다거나 리팩토링 시 더욱 편함을 느낄 수 있을 것이다. 게다가 개발이 완료 되었으면 당연히 테스트 코드를 작성하는 것은 귀찮은 일이 되어버린다. 그럼 코드를 깔끔하게 작성하는 것은 물건너 간 것이고, 실패 케이스를 작성해야하기 때문에 .. 생각만 해도 아찔하지 않은가
TDD 개발주기
- Write a failing Test : 실패하는 테스트 코드를 먼저 작성
- Make the test pass : 테스트 코드를 성공시키기 위한 실제 코드 작성
- Refactor : 중복 코드 제거, 일반화 등 리팩토링 수행
가장 중요한 것은 실패하는 테스트 코드를 모두 작성하고 나서 실제 코드를 작성하는 것이다.
그 이후엔 이 실패하는 테스트 코드를 통과할 수 있을 실제 코드를 작성하는 것이다.
미리 실패 테스트 코드를 작성하면서 실제 코드 작성에서는 불필요한 설계를 피할 수 있다.
TDD, 무엇을 어떻게 테스트 하는걸까?
필자는 react 프로젝트를 테스트해보려 한다.
create-react-app으로 리액트 프로젝트를 생성하면 tdd에 필요한 설정이 모두 되어있기 때문에
처음 접하는 사람들은 create-react-app으로 생성하길 바란다.
이렇게 생성한 프로젝트를 테스트 하기 위해서는 react-testing-library와 jest가 필요하다.
(cypress라는 것도 있는데, 일단 이 프레임워크를 먼저 사용해볼 것이다.)
react-testing-library : DOM을 테스트하기 위한 도구
jest : 리액트 테스팅 도구
react-testing-library는 없이 jest로만 테스트 해도 되고, cra를 한 사람들은 jest가 아마 이미 설치되어 있을 것이다.
여러가지 테스트 방법
- Unit Test : 최소 단위로 기능이 잘 작동하는지 확인하는 방법
- Integration Test : 기능 단위로 묶어 테스트하는 방법. 유닛 테스트가 끝난 모듈을 묶어서 확인함. 서로 다른 시스템들의 상호작용이 잘 이루어지고 있는지 테스트함.
- E2E Test : End to End 테스트로, 프로젝트가 브라우저 위에서 제대로 작동하는지, 사용자 관점에서 테스트하는 방법
본격적으로 테스트하는 것은 다음 글에서 계속!
'FE' 카테고리의 다른 글
[CSS] background 잘림 현상 해결 (0) | 2024.05.20 |
---|---|
[CSS] px, em, rem, vw, vh (0) | 2024.05.14 |