Vite 및 TS를 사용하여 React 프로젝트에서 Vitest, MSW 및 극작가 구성 - 3부

Playwright는 프레임워크에 구애받지 않는 웹 앱용 엔드투엔드 테스트(E2E 또는 통합 테스트라고도 함) 도구입니다. Playwright는 훌륭한 개발자 경험을 갖고 있으며 쉽게 변경 사항 테스트에 대한 탄력성과 좋은 글을 작성하도록 만듭니다.

---

1. 극작가 설치

Playwright를 설정하려면 다음 명령을 실행하세요.

npm init playwright@latest

터미널의 설정 마법사를 통해 안내됩니다. "엔드 투 엔드 테스트를 어디에 배치할 것인가?"라는 메시지가 나타나면 src/tests로 설정할 수 있습니다(이전 튜토리얼에서 권장한 대로).

package.json에 스크립트 추가

package.json에 Playwright 테스트 실행을 위한 다음 두 스크립트를 추가하세요.

이를 통해 개발 환경과 CI 환경 모두에서 테스트를 실행할 수 있습니다.

극작가 구성

playwright.config.ts 파일은 다음과 같이 구성해야 합니다.

구성의 주요 변경 사항:

• use.baseURL: 개발 서버의 기본 URL을 설정하므로 모든 테스트에서 작성할 필요가 없습니다.
• webServer: 이 블록은 개발 서버를 시작하는 방법을 설명합니다. CI 환경이 아닌 이상 이미 실행 중인 서버를 재사용합니다.
• testDir: Playwright가 E2E 테스트를 찾아야 하는 디렉터리입니다(이 경우 src/tests/e2e).

2. 브라우저 테스트를 위한 MSW 구성

지금까지 MSW는 Node.js 환경에서 API 응답을 모의하도록 설정되었습니다. 하지만 플레이라이트는 테스트를 위해 실제 브라우저를 사용하기 때문에 브라우저 환경에서 작동하도록 MSW를 구성해야 합니다.

브라우저 기반 테스트를 위해 MSW 서비스 작업자를 등록할 새 JavaScript 모듈을 만듭니다.

3. 개발 모드에서 작업자 등록

앱이 개발 모드에서 실행 중일 때 MSW 작업자를 시작하려면 앱의 루트 모듈(예: src/main.tsx)에 다음을 추가하세요.

.env 파일에서 VITE_API_MOCK 환경 변수를 설정해야 합니다.

VITE_API_MOCK="true"

4. E2E 테스트 작성

이제 앱의 흐름에 대한 E2E 테스트를 작성할 수 있습니다. 극작가 테스트의 예는 다음과 같습니다.

5. 테스트 실행

E2E 테스트를 실행하려면 다음 명령을 사용하세요.

npm run test:e2e:ci

이렇게 하면 자동화된 파이프라인에 유용한 CI 모드에서 테스트가 실행됩니다.

위 내용은 Vite 및 TS를 사용하여 React 프로젝트에서 Vitest, MSW 및 극작가 구성 - 3부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!