[TDD] TDD란 무엇인가? (+ BDD)

테스트코드를 작성해야한다는 점이 중요하다는 것은 진작 알고는 있었지만, 

시간이 없다는 이유로 도전하지 못했었다.

 

이번에 회사에서 대대적으로 프론트 리빌딩을 하는 과정 속,

TDD를 쓰자고 건의하였고, TDD에 대해 알아보면서 정리한 내용을 아래에 담았다. 

 

---

1. TDD란?

test driven development 의 약자로 “테스트 주도 개발”

코드를 개발하는 과정에서 테스트코드가 추가됨으로, 코드 개발을 하고 테스트 코드를 작성하는 과정으로 오해할 수 있으나,

이는 경기도 오산!(ㅋㅋ)

 

TDD 과정은 아래와 같다.

테스트를 작성하고 테스트가 정상이 될때가지 코드를 작성한다~ → 테스트 실패시 코드 작성하며 테스트 성공할때까지 작성 -> 리팩토링

1) 테스트 케이스를 작성

2) 코드 개발 -> 테스트 케이스 통과할때 까지

3) 테스트 통과를 유지하면서 리팩토링 

 

그러므로 코드가 완성되었다는 의미는, 테스트코드는 이미 작성되어있고, 리팩토링 과정을 이미 거친 상태인 것이다.

 

 

---

 

2. TDD의 장점 vs 단점

1) 장점

• 버그 발견에 용이하다.(개발자 선에서 미리 파악 가능)
• 안전한 리팩토링이 가능하다.(최소한의 보안 장치가 테스트코드)
• 추가 기능 개발에 안정장치 역할을 해준다.(미처 파악하지 못한 영향 범위까지 테스트 해줌)
• 테스트를 하기 위한 코드를 만들도록 노력하기 때문에, 각 컴포넌트의 역할이 단순하고 명확해진다.(추후 유지보수 및 확장에 유리)
• 테스트를 먼저 작성함으로, 자신이 만들고자 하는 요구사항에 대해 명확히 판단(파악)가능하다.

2) 단점

• 테스트의 중요성을 알지만, 비용에 대한 부담감을 느낀다.
• 초기 러닝커브가 있고, 테스트 코드에 대해 집착할 수 있다.

 

 

---

 

3. 테스트 코드 종류

1) unit testing
하나의 단위(프론트 상에서 컴포넌트 단위)로 테스트한다. 그 외의 영향을 주는 요소들은 목킹을 해버린다. (ex- api)

 

2) integration testing

두개 이상의 유닛들이 합쳐진 테스트이다.(ex - 부모와 자식 컴포넌트)

 

3) end to end(e2e) testing

처음부터 끝까지 유저 플로우 흐름으로 진행하는 테스트이다.

 

unit testing, integration testing에 더 공을 들일수록, end to end testing 을 하기 수월해진다.

참고로 unit testing, integration testing에는 주로 jest를 사용하고,

end to end testing에는 주로 cypress를 사용한다.

나중에, jest, cypress 사용법에 대해 올리겠다.

 

 

---

 

4. 테스트 케이스 작성하기 -> "BDD"를 이용하자

테스트 코드를 작성할 때, 어떤 케이스를 작성해야 좋은 케이스를 짤 수 있다고 소문이 날까?

보통 테스트 케이스를 잘 작성해야 유의미한 테스트 코드를 작성할 수 있을 것이다.

이에 대해 BDD를 이용해보려고 한다.

 

BDD? 

TDD에서 파생된 개발 방법론이다. 

Behaviour driven development의 약자.

사용자의 행위를 중점을 두고, 테스트 케이스를 작성하는 방법론!!

보통 기획서에 담긴 요구사항을 보며 작성하면 된다~

ex) 사용자가 버튼을 누르면 "성공" 메세지가 나온다.

 

 

BDD를 이용한 테스트 코드 형식

BDD를 이용하려고 할 때, 사용하는 테스트 코드 형식이 있다.

바로, given -> when -> then이다. (비슷한 용어로 aaa패턴이 있다.)

• given(주어진 환경) : 테스트를 실행하기 전에 필요한 것들을 준비. 예를 들어, 객체를 생성하거나, Mock 객체를 만들거나, 테스트 전에 호출되어야 할 API들을 호출하는 것들을 의미.
• when(행위) : 테스트 코드를 실행.
• then(결과) : 실행한 코드가 예상한대로 동작했는지 확인.

 

BDD를 이용한 테스트 코드 예시

vue, jest 를 이용하여 로그인 관련 테스트 코드를 작성해 보았다.

 

(요구사항) 이메일을 입력해도, 비밀번호를 입력하지 않으면 로그인 버튼은 활성화가 되지않는다.

• given: 이메일을 입력, 비밀번호 미입력
• when: 로그인 버튼 누르기
• then: 로그인 버튼 비활성화 처리 , 결과 변화 없음

 

 

---

이번 기회로, jest 문법을 익히면서 테스트 코드와 더 친해지고 싶다.

또한, 테스트 코드를 통한 리팩토링 과정이 재밌을 것 같다.

 

 

감사합니다.

언제든지 의견 공유부탁드립니다.