본문 바로가기

cypress

프론트엔드 테스트 고민 일지 이 글은 내가 생각하는 정답이나 결론이 아닌 (장바구니 미션을 진행하면서) 프론트엔드 테스트 입문자로서 테스트 관련해서 고민했던 내용을 메모한 글이다. 굳이 테스트 작성하지 않아도 앱은 잘 돌아가는 것처럼 느껴진다. 타이트한 일정 속에서 '테스트를 꼭 작성해야 하나?' 라는 마음이 안 들었다면 거짓말이다. 테스트 코드는 왜 작성해야 할까? 테스트틀 작성해야 하는 이유 테스트 코드는 '보험'이다. 코드는 mutable 하다. 변경의 이유가 기능 추가/변경/삭제이든, 리팩토링이든, 항상 변경의 여지가 언제나 있다. 언제 얼마나 바뀔지 모른다. 그리고 이러한 변경은 새로운 버그 발생의 가능성을 낳는다. 명확한 코드를 작성했다고 생각해도 그 안에 조용히 버그가 숨어있을 수 있다. 테스트 코드가 없다면, 이 버그.. 더보기
cypress - stub 사용법, Alert 테스트 예제, 이벤트타입 'stub' 란? cypress에서 'stub'는 함수가 어떻게 사용되었는지 기록하고 프로그래머가 '함수의 동작을 컨트롤' 할 수 있게 해 준다. 영단어 'stub'는 '그루터기(초목을 베고 남은 밑동)' 또는 '뿌리째 뽑아낸다'는 뜻이다. 비슷한 기능을 가진 'spy'가 스파이처럼 기존 함수를 건드리지 않고 정보만 전달하는 반면, 'stub'는 프로그래머 마음대로 무엇이든 할 수 있도록 통째로 뽑아왔다는 의미에서 'stub'로 지은 게 아닐까 싶다. 'stub'는 유닛 테스트에 가장 흔하게 사용되지만 통합 테스트나 E2E 테스트에서도 유용하다. stub 간단 사용법 stub는 cy.stub() 와 같이 cy 뒤에 체이닝 해서 사용한다. 리턴값이 체이닝 가능한 객체가 아니라 stub이기 때문에 stub .. 더보기
cypress - 테스트 주도 개발(TDD, BDD) 적용 백엔드와 달리 프론트엔드는 테스트 주도 개발(TDD)을 할 수 있는 환경이 잘 갖춰져 있지는 않지만, 테스트도구 사용자들은 만족도가 높은 편이라고 한다. 테스트 도구 중 하나인 cypress는 브라우저 기반의 GUI를 지원하고 문서 정리가 잘되어있어 진입장벽이 낮다. 용어부터 정리하고 넘어가자. 관련용어 정리 TDD(Test-Driven Development) 요구사항에 걸맞는 테스트 케이스를 우선 작성한 다음 ,각 테스트를 통과하기 위한 최소한의 코드를 작성하고 리팩토링 하는 프로그래밍 방식이다. 테스트의 단위는 함수 단위로 매우 작고 거의 모든 함수가 테스트 대상에 포함된다. 모듈크기를 작게하고 모듈간 의존성을 작게한다. add(1, 1)이 2인지 확인하는 것은 TDD 이다. BDD(Behaviour.. 더보기