프론트엔드에서 테스트를 해야하는 이유
예전에는 프론트엔드가 복잡하지 않아 테스트를 잘 진행하지 않았다.
그러나 프론트엔드의 규모가 커지고, 백엔드의 다양한 기능들이 프론트엔드로 옮겨오면서 관리할 필요성이 생기기 시작했다.
프론트엔드 관리와, 코드 퀄리티가 중요해지면서 프론트엔드 테스트도 필요하게 되었다.
이러한 테스트는 코드가 의도한대로 동작하는 것을 보장해준다.
즉, 개발자가 스스로 테스트하는 것이 아닌 자동화시켜 놓치는 부분 없이 의도한 기능대로 동작한다는 것을 보장한다.
유지보수 시 코드를 수정하다보면 사이드이팩트를 알 수 없다. 때문에 개발자들은 점점 기존에 동작하고 있는 코드를 수정하기 꺼려하고, 기존의 코드를 리팩토링해서 사용하기 보다는 중복된 기능을 가진 코드를 생성하는 것을 선호한다.
프로젝트에는 중복되는 코드와 나쁜 코드가 점점 쌓이고 결국 프로젝트는 손쓸 수 없는 상태가 된다.
프로젝트가 더 복잡해지기 전에 테스트를 도입하자!
테스트 종류
프론트엔드의 테스트 종류로는 유닛테스트, 통합테스트, E2E 테스트가 있다.
간단하게 정리하자면 아래와 같다.
- Unit test (단위테스트): 함수 하나, 컴포넌트 하나와 같이 코드의 작은 부분을 테스트
- Integration test (통합테스트): 서로 다른 시스템들의 상호작용이 잘 이뤄지는지 테스트
- E2E test (종단 간 테스트): 사용자와 어플리케이션의 상호작용이 잘 이뤄지는지 테스트
예를 들자면 한 게임에서 유저가 몬스터를 잡는다는 상황을 가정한다.
- 유저가 몬스터에게 달려가는 Move 함수
- 유저가 몬스터를 때리는 Attack 함수
- 몬스터를 잡고 난 후 전리품을 수집하는 Gather 함수
유닛테스트 는 각 함수에 이런저런 입력 값을 줘봐서 잘 되는지 테스트하는 것이고,
통합테스트 는 유저가 몬스터를 잡고 전리품을 수집할 때 실제로 DB에 잘 저장됬는지 테스트하는 것,
e2e 테스트 는 실제 유저가 되어 이 모든 일련의 과정이 정상적으로 돌아가는지 테스트해 보는 것이다.
그래서 어떤테스트를 해야하는가? 🤔
이 테스트를 모두 수행하는지에 대한 대답은 그렇다. 이다.
테스트를 관리하는 데 사용되는 수많은 이론 중 하나인 테스트 피라미드 그림을 참고해보면 단계별 테스트의 비중과 비용을 알 수 있다. (실제로는 모래시계형처럼 통합테스트가 제일 적은 경우도 발생한다.)
테스트 도입
회사에서 프로젝트 성격에 맞춰 테스트 도입해보기로 결정했고 FE 프레임워크가 적용되지 않은 레거시 프로젝트와 프레임워크가 적용된 최근 프로젝트에 테스트 도입에 대해 포스트해보려고 한다.
