Vitest 이슈 분석

•Open SourceTest

이슈 발견

image 여러 오픈소스를 둘러보던 중에 vitest 이슈에 pr welcome 라벨이 있는 걸 보게되었고, 이 라벨을 기준으로 이슈 해결 기여를 해보고 싶다는 생각을 하게 되었다.

vitest issues #6500 (opens in a new tab) 그러던 중 이슈 생성자가 프로덕션 코드 까지 링크로 올려둔 걸 보게 되었다.

stackblitz는 처음 보게되었는데 코드를 바로 공유할 수 있고 다운 받을 수도 있게 되어있었다.

이슈 분석

vitest를 브라우저 환경으로 돌리면 에러가 나는 문제였다.

StackBlitz 환경: process는 있는데 memoryUsage가 없음

2025년 9월에 올라온 문제로 좀 예전 버전(v2.1.1)을 대상으로 되어있었었다.

관련 PR이나, 메인테이너가 제시한 변경 방향대로는 현재 코드에서 반영이 되어있지 않았고 혹시나 최신 버전에서도 동일한 문제가 나는지 확인해보기로 했다.

stackblitz 코드를 다운로드해서 로컬에서 실행했다. (브라우저에서 npm i가 안 됐다. 이것도 추후 공부해봐야 할 것 같다.)

Playwright의 Chromium 브라우저 설치 npx playwright install

package.json scripts에 있는

  "scripts": {
    "test:ui-watch": "vitest watch --ui",
    "test:browser": "vitest run",
    "test:browser-flaky": "vitest run --browser.enabled=true",
    "test:browser-error": "vitest run --browser.enabled=true --coverage.enabled=false"
  },

script를 각각 실행해봤을 때

이슈 제보자가 올려준 문제와 동일하다.

최신 버전 테스트

기존의 vitest 관련된 것을 가장 최신 버전으로 변경 (v4.0.18)

"@vitest/browser": "4.0.18",
"@vitest/coverage-v8": "4.0.18",
"@vitest/ui": "4.0.18",
"vitest": "4.0.18",

(vitest만 버전 변경하려고 했는데 에러 발생, @vitest/* 패키지들은 vitest와 동일한 버전이어야 한다고 한다.)

버전 변경 후 script 실행 했더니 에러가 발생했다. browser.provider 설정 방식이 최신 버전에서 변경되어서 생긴 문제 (기존: string, 현재: factory 함수)

버전에 맞춰서 환경 설정 코드 수정 후 다시 테스트 실행 최신 버전으로 변경 후에 에러 없음

vitest PR #6718 (opens in a new tab)에서 packages/browser/src/node/plugin.ts파일의 vitest:browser:support-testing-library define 값이 사라져서 이제는 에러가 발생 안 하는 것으로 보임

define: {
  // testing-library/preact
  'process.env.PTL_SKIP_AUTO_CLEANUP': !!process.env.PTL_SKIP_AUTO_CLEANUP,
  // testing-library/react
  'process.env.RTL_SKIP_AUTO_CLEANUP': !!process.env.RTL_SKIP_AUTO_CLEANUP,
  'process.env?.RTL_SKIP_AUTO_CLEANUP': !!process.env.RTL_SKIP_AUTO_CLEANUP,
  // testing-library/svelte, testing-library/solid
  'process.env.STL_SKIP_AUTO_CLEANUP': !!process.env.STL_SKIP_AUTO_CLEANUP,
  // testing-library/vue
  'process.env.VTL_SKIP_AUTO_CLEANUP': !!process.env.VTL_SKIP_AUTO_CLEANUP,
  // dom.debug()
  'process.env.DEBUG_PRINT_LIMIT': process.env.DEBUG_PRINT_LIMIT || 7000,
},

이 define이 제거되면서 브라우저에서 process가 더 이상 정의되지 않게 되었고, 결과적으로 typeof process !== 'undefined'체크에서 걸러지게 된 것으로 보인다.

stackblitz 에서도 문제가 없나 테스트를 해보고 싶은데 image npm install 에러가 발생한다.

추후 다시 stackblitz에 대해서 찾아보고 테스트 후에 issue에 코멘트를 다는 방식으로 진행할 것 같다.

© bgkRSS