[FE] FrontEnd에서의 Test

Test

프로그램을 실행하여 오류와 결함을 검출하고 어플리케이션이 요구사항에 맞게 동작하는지 검증하는 절차

즉 테스트를 통해서 발생 가능한 결함을 예방하고 어플리케이션이 요구사항을 충족하는지 검증

추가적으로 개발 과정에서 생기는 변경사항들로 인해 새로운 결함이 유입되지 않았는지 확인 가능

 

프론트엔드는 UI가 존재하기 때문에 두 가지 형태의 테스트를 할 수 있는데

• 자동화 테스트 : 코드로 작성해서 반복적으로 진행하는 테스트
• 수동 테스트 : 브라우저를 통해 개발자가 직접 하는 테스트

로 분류할 수 있음

프론트엔드에서 테스팅이 필요한 이유

Agile과 DevOps의 확산

Agile과 DevOps 프로젝트 flow에 E2E 테스트만을 사용하여 소프트웨어 개발을 할 경우 뒤늦게 버그가 발견되고 해당 원인을 찾는데 시간을 많이 소요

특히 E2E 테스트에서는 종합적인 결과만을 피드백하기 때문에 단위 기능에서 발생하는 에러를 찾기 힘듦

 

프론트엔드 개발의 고도화

프론트엔드 개발이 고도화되면서 다양한 라이브러리와 인터페이스의 상호작용 또한 고도화

=> 이러한 기능들을 구현하기 위한 코드 또한 고도화 되는 것이 당연한 수순

이러한 이유로 테스팅을 통한 코드 품질 확보와 기능의 안정성 확보를 통해 테스트 코드를 작성하면 더 많은 시간을 오류를 해결하고 기능을 완성하는데 사용할 수 있음

FrontEnd 에서의 Test

테스팅 트로피

테스트에도 종류가 정말 많지만 우서 Guillermo Rauch가 제안한 E2E 테스트 중심의 테스팅 개념인 테스팅 트로피를 통해 살펴보자

테스팅 트로피의 가장 큰 특징은 정적 테스트가 추가 되었다는 점과 통합 테스트가 단위 테스트보다 크다는 점

이는 에러를 발견하고 해당 에러를 해결하는데 있어, 단위 테스트보다 통합 테스트 단에서 이뤄질 때 더욱 효과적임을 주장하고 있기 때문

 

테스팅 트로피에는 4가지 타입의 테스트 존재

정적 테스트

소프트웨어를 실행하지 않고 테스팅 하는 기법

소프트웨어의 소스코드와 내부에서 구문오류와 타입오류같은 결함을 발견 하는 것

ES Lint같은 테스트 도구를 이용

단위 테스트

하나의 모듈을 기준으로 독립적으로 진행되는 가장 작은 단위의 테스트

여기서 모듈은 어플리케이션에서 작동하는 하나의 기능 또는 메서드

Input에 대한 올바른 Output을 반환하는지 테스트

=> 어떤 기능이 실행되면 어떤 결과가 나온다 정도로 테스트 진행

 

소프트웨어 내부 구조나 구현 방법을 고려하여 개발자 관점에서 진행하는 테스트이므로 화이트 박스 테스트

프로그래밍 언어마다 단위 테스트에서 사용하는 프레임워크에 차이가 있다

자바스크립트에서의 테스트 도구는 Jest, Mocha 등을 사용

통합 테스트

통합테스트는 모듈을 통합하는 과정에서 모듈 간의 호환성을 확인하기 위해 수행되는 테스트

일반적으로 어플리케이션은 여러 개의 모듈로 구성되고 모듈끼리 함수를 호출하면서 수행

=> 통합된 모듈들이 올바르게 연계되서  동작하는지 검증하는 것...!

따라서 통합테스트는 독립적인 기능에 대한 테스트가 아니라 웹 페이지로부터 API를 호출하여 올바르게 동작하는 지 확인

비지니스로 로직과 연관된 테스트를 하기에 적합

Jest 또는 Testing Library 등을 이용해서 진행

E2E 테스트

어플리케이션의 흐름을 처음부터 끝까지 테스트 하는 것

실제 사용자의 사용 시나리오를 테스트 함으로서 어플리케이션 동작을 테스트하고, 해당 테스트를 통과함으로서 어플리케이션이 제대로 동작함을 보장하는 방법

단위 테스트와 통합 테스트에 비하여 다루는 범위가 크다는 특징이 있음

사용 툴로는 Cypress, Puppeteer 등이 있음

그 외의 테스트

UI 테스트

컴포넌트가 예상한대로 화면에 그려지는지 테스트

Storybook, Bit, stylegudist 등의 툴을 이용해서 테스트 가능

웹 접근성 테스트

장애인, 고령자, 저시력자, 색각 이상자 등의 다양한 사용자 그룹이 웹사이트를 접근하고 이용할 수 있는지 테스트

Storybook accessibility addons, 스크린 리더, Wave등의 툴을 이용해서 테스트 가능

크로스 브라우저 테스트

다양한 브라우저에서 앱/ 웹이 동일하게 동작하는 테스트

다양한 브라우저들을 직접 방문해서 테스트하는 방식으로 진행

---

화이트박스 테스트 내부 소스 코드를 테스트 하는 기법으로 사용자가 들여다 볼 수 없는 구간의 코드 단위를 테스트
반대되는 말로는 소프트웨어의 내부 구조를 모르는 상태에서 소프트웨어의 동작을 검사하는 블랙박스 테스트가 있음