저자는 Node.js에 의존하지 않고 프론트엔드 JavaScript를 작성하는 것을 목표로 합니다. 직면한 중요한 과제는 프론트엔드 코드에 대한 효과적인 테스트 방법의 부족입니다. Playwright를 사용한 이전 시도는 느리고 Node.js가 필요하다고 판단되었습니다. 이를 해결하기 위해 저자는 Alex Chan의 미니멀리스트 인브라우저 단위 테스트 프레임워크에 대한 작업을 참고하여 테스트를 브라우저 탭 내에서 직접 실행하는 것을 탐구했습니다. Chan의 접근 방식은 단위 테스트에 중점을 두었지만, 저자는 Node.js 빌드 프로세스 없이 Vue 컴포넌트에 대한 엔드투엔드 통합 테스트를 수행하고자 했습니다.저자는 테스트 프레임워크로 QUnit을 사용했으며, 디버깅을 위한 "rerun test" 버튼을 높이 평가했습니다. 이 과정에는 Vue 컴포넌트를 전역적으로 노출하여 설정하고, 보이지 않는 페이지 외부 div에 렌더링하는 mountComponent 함수를 만드는 것이 포함되었습니다. Fixture 데이터는 전용 엔드포인트로 POST 요청을 보내 데이터베이스를 재설정하여 관리되었습니다. 그런 다음 기본적인 테스트는 컴포넌트를 렌더링하고 해당 내용을 어설션했습니다.비동기 작업 완료를 기다리는 것이 주요 문제로 대두되었고, 이는 waitFor() 함수의 개발로 이어졌습니다. 기다릴 올바른 요소나 조건을 식별하는 것이 어려웠으며, 더 나은 안정성을 위해 애플리케이션을 리팩토링하라는 제안을 유도했습니다. 저자는 또한 요소 식별을 위해 CSS 클래스를 추가하는 것을 실험했으며, Testing Library와 같은 라이브러리가 더 접근 가능한 접근 방식을 권장한다고 언급했습니다.폼 처리는 단순히 값을 설정하는 것만으로는 충분하지 않았기 때문에 어려움을 겪었습니다. 관련 DOM 이벤트를 디스패치해야 했습니다. 이는 UI 테스트 라이브러리가 이러한 작업을 단순화할 수 있는 이유를 강조했습니다. 테스트 커버리지는 Chrome의 내장 개발자 도구를 사용하여 부분적으로 평가되었지만, 번들링된 JavaScript와 함께 작동하려면 특정 구성 및 작업이 필요했습니다.학습 곡선에도 불구하고 저자는 이 경험을 즐겁게 여겼으며 자신의 프론트엔드 프로젝트에 대한 자신감 있는 테스트 스위트를 구축하는 것에 대해 낙관적인 태도를 보였습니다. 또한 브라우저 전용 실행과 호환되는 UMD 빌드를 제공하는 Testing Library와 같은 라이브러리를 더 탐구하고 브라우저 우선 테스트를 CI 환경에 통합하는 방법을 고민하고 있습니다.
mountComponent함수를 만드는 것이 포함되었습니다. Fixture 데이터는 전용 엔드포인트로 POST 요청을 보내 데이터베이스를 재설정하여 관리되었습니다. 그런 다음 기본적인 테스트는 컴포넌트를 렌더링하고 해당 내용을 어설션했습니다.비동기 작업 완료를 기다리는 것이 주요 문제로 대두되었고, 이는waitFor()함수의 개발로 이어졌습니다. 기다릴 올바른 요소나 조건을 식별하는 것이 어려웠으며, 더 나은 안정성을 위해 애플리케이션을 리팩토링하라는 제안을 유도했습니다. 저자는 또한 요소 식별을 위해 CSS 클래스를 추가하는 것을 실험했으며, Testing Library와 같은 라이브러리가 더 접근 가능한 접근 방식을 권장한다고 언급했습니다.폼 처리는 단순히 값을 설정하는 것만으로는 충분하지 않았기 때문에 어려움을 겪었습니다. 관련 DOM 이벤트를 디스패치해야 했습니다. 이는 UI 테스트 라이브러리가 이러한 작업을 단순화할 수 있는 이유를 강조했습니다. 테스트 커버리지는 Chrome의 내장 개발자 도구를 사용하여 부분적으로 평가되었지만, 번들링된 JavaScript와 함께 작동하려면 특정 구성 및 작업이 필요했습니다.학습 곡선에도 불구하고 저자는 이 경험을 즐겁게 여겼으며 자신의 프론트엔드 프로젝트에 대한 자신감 있는 테스트 스위트를 구축하는 것에 대해 낙관적인 태도를 보였습니다. 또한 브라우저 전용 실행과 호환되는 UMD 빌드를 제공하는 Testing Library와 같은 라이브러리를 더 탐구하고 브라우저 우선 테스트를 CI 환경에 통합하는 방법을 고민하고 있습니다.