# 테스팅
# 소개
테스트는 신뢰할 수 있는 애플리케이션을 구축 하거나, 개인 또는 팀이 새로운 기능 빌드, 코드 리팩토링, 버그 수정 등의 작업에 중요한 역할을 할 수 있습니다. 테스팅에는 많은 의견들이 있지만, 웹 애플리케이션의 측면에서 종종 논의되는 세 가지 카테고리를 소개해드립니다.
- 단위 테스팅
- 컴포넌트 테스팅
- 종단간 (E2E) 테스팅
이번 섹션은 테스팅의 생태계를 알아보고, Vue 애플리케이션 또는 컴포넌트 라이브러리를 위한 적절한 도구를 찾는 가이드를 제공합니다.
# 단위 테스팅
# 소개
단위 테스트를 통해 코드 단위를 독립적으로 테스트 할 수 있습니다. 단위 테스팅은 개발자에게 코드에 대한 자신감을 줍니다. 철저하고 의미있는 테스트를 작성하면, 새로운 기능이 빌드되거나 코드를 리팩토링 할 때 애플리케이션이 기능적이고 안정적으로 유지 될 것이라는 확신을 할 수 있습니다.
Vue 애플리케이션을 단위 테스트 하는 것은 다른 애플리케이션을 단위 테스트 하는 것과 크게 다르지 않습니다.
# 프레임워크 선택
단위 테스팅에 대한 조언은 종종 프레임워크에 구애받지 않는(framwork-agnostic)경우가 많기 떄문에, 애플리케이션에 가장 적합한 단위 테스팅 도구인지 평가할 때 염두해야 할 몇 가지 기본 가이드가 있습니다.
# 최고의 오류 보고
테스트에 실패 했을 때, 단위 테스팅 프레임워크는 유용한 에러 메세지를 제공하는 것이 중요합니다. 유용한 에러 메세지를 제공하는 기능은 assertion 라이브러리의 역할 입니다. 고품질의 오류 메시지가 포함 된 assertion 라이브러리는 디버깅 시간을 줄일 때 도움이 됩니다. 단순히 어떤 테스트가 실패했는지 알려주는 것 외에도, assertion 라이브러리는 테스트가 실패한 이유에 대한 컨텍스트를 제공합니다. (예 : 예상하는 것과 전달받은 것).
Jest와 같은 단위 테스팅 프레임워크는 assertion 라이브러리를 포함합니다. 그와 다르게 Mocha등의 단위 테스팅 프레임워크의 경우 assertion 라이브러리를 별도로 설치해야합니다. (일반적으로 Chai 라이브러리)
# 활성화된 커뮤니티와 팀
대부분의 단위 테스팅 프레임워크는 오픈 소스이기 때문에 활발한 커뮤니티가 있는 것이 테스트와 프로젝트를 장기간 유지해야하는 일부 팀에게는 중요합니다. 또한 활발한 커뮤니티가 있다면 문제가 발생할 때마다 더 많은 도움을 받을 수 있는 이점이 있습니다.
# 프레임워크
생태계에는 많은 도구들이 있지만, 다음은 Vue.js 생태계에서 사용되는 일반적인 단위 테스팅 도구들입니다.
# Jest
Jest는 단순성에 초점을 맞춘 JavaScript 테스트 프레임워크입니다. 특징 중 하나는 애플리케이션의 단위를 확인하는 기능을 제공하기 위해 테스트의 스냅 샷을 찍습니다.
자료:
# Mocha
Mocha는 유연성에 중점을 둔 JavaScript 테스트 프레임워크입니다. 그래서 spying (예 : Sinon) 또는 assertion (예 : Chai)과 같은 어떠한 기능을 수행하기 위해 별도의 라이브러리를 선택해야 합니다. Mocha의 또 다른 특징은 Node.js 외에도 브라우저에서 테스트를 실행할 수 있다는 것입니다.
자료:
# 컴포넌트 테스팅
# 소개
대부분의 Vue 컴포넌트를 테스트하려면, 컴포넌트가 작동 중인지 확인하기 위해 DOM (가상 또는 실제)에 마운트해야합니다. 이것은 프레임워크에 구애받지 않는(framwork-agnostic) 또 다른 개념입니다. 결과적으로 컴포넌트 테스팅 프레임워크는 사용자에게 안정적인 방식으로 이를 수행 할 수있는 기능을 제공하는 동시에 Vuex, Vue Router 및 기타 Vue 플러그인에 대한 호환과 같은 Vue 고유의 편의성을 제공하기 위해 만들어졌습니다.
# 프레임워크 선택
이번 섹션은 애플리케이션에 가장 적합한 컴포넌트 테스팅 프레임워크를 선택할 때 유의해야 할 사항에 대한 가이드를 제공합니다.
# Vue 생태계와의 최적 호환성
첫 번째 기준 중 하나는 Vue 생태계와 컴포넌트 테스팅 라이브러리가 최대한 호환되어야 한다는 것입니다. 포괄적인 것처럼 보일 수 있지만, 염두에 두어야 할 주요 호환 영역에는 단일 파일 컴포넌트 (SFCs), Vuex, Vue Router 및 애플리케이션이 의존하는 기타 Vue 특정 플러그인이 있습니다.
# 최고의 오류 보고
테스트가 실패하면, 컴포넌트 테스팅 프레임워크는 문제를 디버깅할 때 소요되는 시간을 줄이는 데 도움이되는 유용한 오류 로그를 제공하는지가 중요합니다. 단순히 어떤 테스트가 실패했는지 알려주는 것 외에도 테스트가 실패한 이유에 대한 컨텍스트도 제공해야합니다.(예 : 예상하는 것과 전달받은 것)
# 추천
# Vue 테스팅 라이브러리 (@testing-library/vue)
Vue 테스팅 라이브러리는 구현 세부사항에 의존하지 않고 테스팅 컴포넌트에 초점을 맞춘 도구 모음입니다.
기본 원칙은 소프트웨어를 사용하는 방식과 유사한 테스트가 많을수록 더 많은 신뢰를 줄 수 있습니다.
자료:
# Vue Test Utils
Vue Test Utils는 사용자에게 Vue 특정 API에 대한 액세스를 제공하기 위해 작성된 공식 저수준 컴포넌트 테스트 라이브러리입니다. Vue 응용 프로그램을 처음 테스트하는 경우 Vue Test Utils를 추상화한 Vue Testing Library를 사용하는 것이 좋습니다.
자료:
- 공식 Vue Test Utils 문서
- Vue 테스팅 핸드북 by Lachlan Miller
# 종단간 (E2E) 테스팅
# 소개
단위 테스트 및 컴포넌트 테스트는 개발자에게 어느 정도의 확신을 제공하지만, 프로덕션에 배포 될 때, 애플리케이션의 전체적인 범위에 대한 기능의 확신을 제공하진 못 합니다. 그래서, E2E 테스트는 애플리케이션의 가장 중요한 측면, 즉 사용자가 실제로 애플리케이션을 사용할 때 일어나는 범위에 대한 기능의 확신을 제공합니다.
즉, E2E 테스트는 애플리케이션의 모든 계층을 검증합니다. 검증에는 프론드엔드 코드뿐 아니라 사용자가 있을 환경을 잘 나타내는 모든 백엔드 서비스 및 인프라가 포함됩니다. 사용자의 동작이 애플리케이션에 미치는 영향을 테스팅함으로써 E2E 테스트는 애플리케이션이 제대로 작동하는지에 대한 신뢰도를 높이는 열쇠가됩니다.
# 프레임워크 선택
웹에서 종단간 (E2E) 테스팅은 개발 프로세스 속도 저하와 낮은 신뢰도로 부정적인 평판을 갖고 있었지만, 최신 E2E 도구는 보다 안정적이고 대화형이며 유용한 테스트를 만드는 진전을 이루었습니다. 이번 섹션에서는 애플리케이션에 맞는 E2E 테스팅 프레임워크를 선택할 때 유의해야 할 몇 가지 가이드를 제공합니다.
# 크로스-브라우저 테스팅
종단간 (E2E) 테스팅의 주요 이점 중 하나는 여러 브라우저에서 애플리케이션을 테스트 할 수 있다는 것입니다. 브라우저 간 100% 적용 범위를 갖는 것이 바람직해 보일 수 있지만, 브라우저 간 테스팅은 일관적인 실행을 위한 추가 시간과 기계 성능으로 인한 팀의 리소스에 대한 수익이 감소한다는 점에 유의해야합니다. 따라서 응용 프로그램에 필요한 크로스 브라우저 테스팅의 양을 선택할 때 이러한 절충점을 염두에 두는 것이 중요합니다.
TIP
브라우저 관련 문제를 포착하기 위해 최근 개발은 일반적으로 사용되지 않는 브라우저(예 :
# 빠른 피드백 주기
E2E 테스트 및 개발은 전체 제품을 실행하는데 오랜 시간이 걸립니다. 일반적으로 E2E 테스트는 CI/CD (지속적 통합 및 배포) 파이프라인에서 수행됩니다. 최신 E2E 테스팅 프레임워크는 병렬화 같은 기능을 추가하여 이 문제를 해결하는 데 도움을 주고, 이를 통해 CI/CD 파이프라인이 더 빠르게 실행됩니다. 또한 로컬에서 개발할 때, 작업중인 페이지에 대해 단일 테스트를 선택적으로 실행하는 동시에 테스트의 핫 리로딩을 제공하는 기능은 개발자의 작업흐름과 생산성을 높이는 데 도움이 될 수 있습니다.
# 최고의 디버깅 경험
개발자는 전통적으로 테스트에서 무엇이 잘못되었는지 확인하기 위해 터미널 창에서 로그를 스캔하는 데 의존해 왔지만, 현대 종단간 (E2E) 테스트 프레임워크를 사용하면 개발자가 익숙한 도구를 활용할 수 있습니다. (예 브라우저 개발자 도구)
# 헤드리스 모드의 가시성
지속적 통합/배포 파이프라인에서 계속 종단간 (E2E) 테스트를 실행하려면 헤드리스 브라우저에서 실행되는 경우가 많습니다 (즉, 사용자가 볼 수있는 브라우저가 열리지 않음). 결과적으로 오류가 발생할 때, E2E 테스팅 프레임워크가 오류 발생 원인에 대한 통찰력 제공을 위해 지원하는 기능은 다양한 테스팅 단계에서 애플리케이션의 스냅샷 또는 비디오를 볼 수 있는 기능입니다. 과거, 이러한 통합을 유지하는 것은 지루한 작업입니다.
# 추천
생태계에는 많은 도구가 있지만, 다음은 Vue.js생태계에서 사용되는 일반적인 종단간 (E2E) 테스팅 프레임 워크입니다.
# Cypress.io
Cypress.io는 개발자가 애플리케이션을 안정적으로 테스트하는 동시에 최고의 개발 경험을 제공함으로써 개발자 생산성을 높이는 것을 목표로하는 테스팅 프레임워크입니다.
자료
# Nightwatch.js
Nightwatch.js는 Node.js의 단위, 통합 테스팅은 물론 웹 애플리케이션과 웹 사이트를 테스트하는 데 사용할 수 있는 종단간 테스팅 프레임워크입니다.
자료:
# Puppeteer
Puppeteer는 브라우저를 제어하기 위한 고급 API를 제공하고 다른 테스트 실행기 (예 : Jest)와 연동하여 애플리케이션을 테스트할 수 있는 노드 라이브러리입니다.
자료:
# TestCafe
TestCafe는 Node.js 기반의 단순한 프레임워크로, 개발자가 작성하기 쉽고 안정적인 테스트 작성에 집중할 수 있도록 손쉬운 설정을 제공합니다.
자료: