브라우저 모드 (실험적)

이 페이지에서는 Vitest API의 실험적인 브라우저 모드 기능에 대한 정보를 제공합니다. 이 기능을 사용하면 window 및 document와 같은 브라우저 전역 변수에 접근하여 브라우저 환경에서 직접 테스트를 실행할 수 있습니다. 현재 개발 중인 기능이므로 API는 향후 변경될 수 있습니다.

동기

Vitest 브라우저 모드는 테스트 워크플로를 개선하고 더 정확하고 신뢰할 수 있는 테스트 결과를 얻기 위해 개발되었습니다. 이 실험적인 기능은 테스트 API에 추가되어 개발자가 실제 브라우저 환경에서 테스트를 실행할 수 있도록 지원합니다. 이 섹션에서는 브라우저 모드의 개발 동기와 테스트에 대한 이점을 자세히 살펴보겠습니다.

다양한 테스트 방법

JavaScript 코드를 테스트하는 방법은 다양합니다. 일부 테스트 프레임워크는 Node.js 환경에서 브라우저 환경을 시뮬레이션하는 반면, 다른 프레임워크는 실제 브라우저에서 테스트를 실행합니다. 예를 들어, jsdom은 Jest 또는 Vitest와 함께 사용되어 브라우저 환경을 시뮬레이션하는 라이브러리입니다. 반면 WebdriverIO, Cypress, Playwright 등은 실제 브라우저 또는 브라우저 엔진을 사용하여 테스트를 진행할 수 있도록 지원합니다.

시뮬레이션 환경의 한계

jsdom 또는 happy-dom과 같은 시뮬레이션된 환경에서 JavaScript 프로그램을 테스트하면 테스트 설정이 간소화되고 사용하기 쉬운 API가 제공되어 많은 프로젝트에 적합하며 테스트 결과에 대한 신뢰도를 높일 수 있습니다. 하지만 이러한 도구들은 실제 브라우저가 아닌 환경을 모방하기 때문에 실제 브라우저와 차이가 발생할 수 있다는 점을 유념해야 합니다. 따라서 테스트 결과에서 거짓 양성 또는 거짓 음성 오류가 발생할 가능성이 있습니다.

테스트 결과에 대한 최고 수준의 신뢰도를 확보하려면 실제 브라우저 환경에서 테스트하는 것이 중요합니다. 이것이 바로 Vitest에서 브라우저 모드 기능을 개발한 이유입니다. 개발자는 브라우저에서 직접 테스트를 실행하여 더 정확하고 신뢰할 수 있는 테스트 결과를 얻을 수 있습니다. 브라우저 수준 테스트를 통해 개발자는 실제 시나리오에서 애플리케이션이 의도한 대로 작동할 것이라고 더욱 확신할 수 있습니다.

단점

Vitest 브라우저 모드를 사용할 때는 다음과 같은 단점을 고려해야 합니다.

초기 개발 단계

Vitest의 브라우저 모드 기능은 아직 개발 초기 단계에 있습니다. 따라서 아직 완전히 최적화되지 않았을 수 있으며, 해결되지 않은 버그나 문제가 있을 수 있습니다. WebdriverIO, Cypress, Playwright와 같은 독립적인 브라우저 테스트 도구를 Vitest 브라우저 모드와 함께 사용하면 더 나은 테스트 경험을 얻을 수 있습니다.

초기화 시간 증가

Vitest 브라우저 모드는 초기화 과정에서 프로바이더와 브라우저를 실행해야 하므로 시간이 다소 걸릴 수 있습니다. 따라서 Node 환경에서의 테스트와 같은 다른 테스트 방식에 비해 초기화 시간이 더 길어질 수 있습니다.

구성

Vitest 구성에서 브라우저 모드를 활성화하려면 --browser 플래그를 사용하거나 Vitest 구성 파일에서 browser.enabled 필드를 true로 설정할 수 있습니다. 다음은 browser 필드를 사용하는 구성 예시입니다.

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      name: 'chrome', // 브라우저 이름은 필수입니다.
    },
  },
});

브라우저 옵션 유형

Vitest 브라우저 옵션은 사용하는 프로바이더에 따라 달라집니다. 설정 파일에서 브라우저 이름을 지정하지 않고 --browser 플래그만 사용하면 Vitest에서 오류가 발생합니다. 사용 가능한 옵션은 다음과 같습니다.

• webdriverio (기본값)는 다음 브라우저를 지원합니다.
  • firefox
  • chrome
  • edge
  • safari
• playwright는 다음 브라우저를 지원합니다.
  • firefox
  • webkit
  • chromium

교차 브라우저 테스트

브라우저 옵션에서 브라우저 이름을 지정하면 Vitest는 기본적으로 WebdriverIO를 사용하여 지정된 브라우저를 실행한 다음 해당 브라우저에서 테스트를 실행합니다. 이 기능을 통해 CI 환경 등에서 교차 브라우저 테스트를 간편하게 설정하고 실행할 수 있습니다. WebdriverIO를 사용하지 않으려면 browser.provider 옵션을 사용하여 사용자 지정 브라우저 프로바이더를 구성할 수 있습니다.

CLI를 사용하여 브라우저를 지정하려면 다음과 같이 --browser 플래그 뒤에 브라우저 이름을 사용합니다.

npx vitest --browser=chrome

또는 점 표기법을 사용하여 CLI에 브라우저 옵션을 전달할 수 있습니다.

npx vitest --browser.name=chrome --browser.headless

NOTE

WebdriverIO와 함께 Safari 브라우저 옵션을 사용하는 경우, 장치에서 sudo safaridriver --enable을 실행하여 safaridriver를 활성화해야 합니다.

또한 테스트를 실행할 때 Vitest는 safaridriver와의 호환성을 위해 필요한 드라이버를 설치하려고 시도합니다.

헤드리스 모드

헤드리스 모드는 브라우저 모드에서 사용할 수 있는 또 다른 옵션입니다. 헤드리스 모드에서는 브라우저가 사용자 인터페이스 없이 백그라운드에서 실행되므로 자동화된 테스트를 실행하는 데 유용합니다. Vitest의 헤드리스 옵션은 불리언 값으로 설정하여 헤드리스 모드를 활성화하거나 비활성화할 수 있습니다.

다음은 헤드리스 모드를 활성화하는 구성 예시입니다.

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      headless: true,
    },
  },
});

CLI에서 --browser.headless 플래그를 사용하여 헤드리스 모드를 설정하는 방법은 다음과 같습니다.

npx vitest --browser.name=chrome --browser.headless

이 경우 Vitest는 Chrome 브라우저를 사용하여 헤드리스 모드로 실행됩니다.

제한 사항

스레드 차단 대화 상자

Vitest 브라우저 모드를 사용할 때는 alert 또는 confirm과 같은 스레드 차단 대화 상자를 기본적으로 사용할 수 없다는 점에 유의해야 합니다. 이러한 대화 상자는 웹 페이지의 실행을 막아 Vitest가 페이지와 통신할 수 없게 만들고, 결국 테스트가 멈추게 됩니다.

이러한 문제를 방지하기 위해 Vitest는 해당 API에 대한 기본 반환 값을 가진 Mocking을 기본적으로 제공합니다. 이렇게 하면 사용자가 실수로 동기 팝업 웹 API를 사용하는 경우에도 실행이 중단되지 않습니다. 하지만 더 나은 테스트 경험을 위해서는 해당 웹 API를 직접 Mock 처리하여 사용하는 것을 권장합니다. 자세한 내용은 모의 페이지를 참조하십시오.