혹시 리팩토링 진행 후에 웹이 정상적으로 동작하는지
수작업으로 일일이 테스트 해본 적이 있으신가요?
항상 불편함에 의해서 기술이 등장하듯이
cypress도 이러한 불편함을 해소하기 위해 등장한 프론트엔드 테스트 도구입니다.
웹이 정상적으로 동작하는지 자동으로 테스트하는 기능을 제공하죠.
또한 TDD(테스트 주도 개발)을 위한 도구이기도 합니다.
먼저 TDD에 대해 알아보겠습니다.
😵 TDD란?
TDD = Test Driven Development
말그대로 테스트 주도 개발입니다.
어떤 기능에 대한 테스트를 먼저 만들고
이후에 테스트를 만족하도록 하는 기능을 만드는 식입니다.
TDD 방법을 사용하면 단기적으로는 코딩 시간이 오래걸릴 수 있지만
장기적으로는 코드 복잡도와 버그를 줄여주는 효과를 보여준다고 합니다.
이 부분에 대해서는 저도 아직 책을 통해 공부 중이라
추후에 TDD에 대해 자세히 글을 올리겠습니다.
그런데 cypress는 TDD와 BDD 라는 테스트 방식을 둘 다 사용할 수 있습니다.
그럼 TDD와 BDD의 차이는 뭘까요?
🔍 TDD vs BDD
TDD와 BDD는
TDD = Test Driven Development
BDD = Behaviour Driven Development
의 약자입니다. 사실 BDD는 TDD를 포함하고 있습니다.
그럼 BDD와 TDD는 무슨 차이일까요?
테스트와 행동의 차이? 이게 무엇을 의미할까요
TDD와 BDD의 방식 차이를 잘 나타낸 사진 하나를 들고 왔습니다.
BDD는 TDD를 기반으로 하지만
unit 테스트(함수 단위 테스트)에 적합한 TDD에 비해
BDD는 좀 더 사용자 관점에서 바라보며
'사용자가 어떠한 행동을 취하면 어떠한 결과가 나와야한다.' 라는 E2E 테스트에 적합합니다.
이는 다시 말하면 프론트엔드에 적합한 테스트 방식이라고 얘기할 수 있습니다.
예를들어
백엔드는 어떤 '값'을 입력으로 넣었을 때 '값'이 출력으로 나오는 TDD에 적합하지만
프론트엔드는 사용자와 직접 대면하고 있기에 '값'보다는 '행동'에 더 초점이 맞춰져 있어 BDD가 적합한 것입니다.
📎 cypress 관련 링크
cypress를 처음 배울 때 보면 좋은 링크들입니다.
참고하셔서 cypress와 친해져봐요!
cypress 레퍼런스
https://docs.cypress.io/guides/references/assertions.html
cypress 치트시트
https://cheatography.com/aiqbal/cheat-sheets/cypress-io/
