프론트엔드 테스트 종류

*️⃣ Static Test

정적 테스트란 코드를 실행시키지 않고 테스트를 하는 것을 의미한다. 

 

✧ Typescript

TypeScript는 정적 타입 검사를 제공하여 코드의 안전성을 높이고 개발자가 코드를 더욱 안정적으로 유지할 수 있다.

 

✧ ESLint

ESLint는 코드 스타일 및 일반적인 프로그래밍 오류를 검사하여 코드의 일관성과 품질을 향상시킨다.

 

*️⃣ Unit Test

 

단위 테스트는 프로그래밍을 할 때 소스코드의 특정 모듈(메서드)이 의도된 대로 정확히 작동하는지 검증하는 절차이다.

 

툴: Jest, Jasmine, Karma, Mocha

 

✧ Jest

Jest는 코드가 제대로 동작하는 지 확인하는 test case 를 만드는 테스팅 프레임워크

 

- 기능

- 사용법

jest docs:https://jestjs.io/docs/getting-started

 

 

*️⃣ Integration Test

통합 테스트는 두 개 이상의 모듈을 연결하여 테스트하는 것을 의미한다. 단위 테스트 보다 넓은 범위에서 테스트하여 단위 테스트와 달리 리팩토링에도 쉽게 깨지지 않는다. 

프론트엔드의 경우 API와 상호작용이 올바르게 일어나는지, 또는 상태에 따라 UI가 잘 변경되는지를 테스트할 수 있다. 

 

툴: jest, testing library, msw

 

✧ MSW(Mock Service Worker)

API Mocking 라이브러리로, 서버향의 네트워크 요청을 가로채서 모의 응답(Mocked response)을 보내주는 역할을 한다. 따라서, Mock Service Worker(MSW) 라이브러리를 통하면, Mock 서버를 구축하지 않아도 API를 네트워크 수준에서 Mocking 할 수 있다.

자세한 설명은 아래 글을 참고하자.

https://tech.kakao.com/2021/09/29/mocking-fe/

 

 

 

*️⃣ E2E(End to End) Test

E2E 테스트는 애플리케이션의 흐름을 처음부터 끝까지 테스트하는 것을 의미한다. 유닛 테스트나 통합 테스트는 모듈의 무결성을 증명할 수 있는 강력한 테스트이지만, 모듈의 무결성이 애플리케이션 동작의 무결성까지는 증명해 줄 수 없다. 그래서 E2E 테스트 과정에서는 실제 사용자의 시나리오를 테스트함으로써 애플리케이션 동작을 테스트하게 되고, 이 테스트를 통과함으로써 애플리케이션의 무결성을 증명할 수 있게 된다.

 

툴: Cypress, TestCafe, Puppeteer, Nightwatch.js, Playwright

 

✧ Cypress

1. Time Travel: Cypress는 테스트가 실행되는 동안 스냅샷을 캡처한다. 명령 로그에서 명령을 가리키면 각 단계에서 정확히 무엇이 발생했는지 볼 수 있다.
2. Debuggability: 테스트가 실패하는 이유를 추측하지 않아도 됩니다. 개발자 도구와 같은 익숙한 도구에서 직접 디버깅할 수 있다. 읽기 쉬운 오류 및 스택 추적은 디버깅을 빠르게 해준다.
3. Automatic Waiting: 테스트에 대기 시간이나 슬립을 추가할 필요가 없다. Cypress는 명령 및 어설션을 자동으로 대기하고 넘어간다. 더 이상 비동기적인 문제가 없다.
4. Spies, Stubs, and Clocks: 함수, 서버 응답 또는 타이머의 동작을 검증하고 제어할 수 있다. 단위 테스트에서 좋아하는 기능이 여기서도 사용할 수 있다.
5. Network Traffic Control: 서버를 거치지 않고도 네트워크 트래픽을 쉽게 제어하고 테스트할 수 있다. 원하는대로 네트워크 트래픽을 스텁화할 수 있다.
6. Consistent Results: Cypress의 아키텍처는 Selenium이나 WebDriver를 사용하지 않습니다. 빠르고 일관되며 신뢰할 수 있는 테스트이다.
7. Screenshots, Videos, and Test Replay: 실패할 때 자동으로 캡처된 스크린샷이나, 활성화된 경우 CLI에서 전체 테스트 스위트의 동영상을 보실 수 있습니다. Cypress Cloud로 녹화하여 테스트 실행 중에 테스트를 재생하여 구성 없이 디버깅할 수 있다.
8. Cross Browser Testing: 로컬로 Firefox 및 Chrome 계열 브라우저(Edge 및 Electron 포함)에서 테스트를 실행하고 지속적인 통합 파이프라인에서 최적화할 수 있다.
9. Smart Orchestration: Cypress Cloud로 녹화할 수 있는 경우 테스트 스위트를 쉽게 병렬화하고, 우선순위가 지정된 스펙을 먼저 실행하고, 오류 발생 시 자동 취소하여 빠른 피드백 루프를 제공할 수 있다.
10. Flake Detection: Cypress Cloud의 'Flaky test management'를 통해 신뢰할 수 없는 테스트를 발견하고 진단할 수 있다.

사용법

cypress docs: https://learn.cypress.io/tutorials

 

*️⃣  UI Test with Storybook

✧ Storybook

 

- 사용법

storybook docs: https://storybook.js.org/docs/get-started

 

- 테스트 기능

 

- 이점

• 더 견고한 UI 개발
• 더 적은 노력과 플레이크 없이 UI 테스트
• 팀이 재사용할 UI 문서화
• UI 작동 방식 공유
• UI 워크플로우 자동화

 

 

 

 

 

 

 

참고: https://fe-developers.kakaoent.com/2023/230209-e2e/