마이그레이션 가이드

Jest에서 마이그레이션

Vitest는 Jest와 호환되는 API로 설계되어 Jest로부터의 마이그레이션을 최대한 간소화했습니다. 이러한 노력에도 불구하고 다음과 같은 차이점을 발견할 수 있습니다.

기본적으로 전역 변수 비활성화

Jest는 기본적으로 전역 API가 활성화되어 있지만, Vitest는 그렇지 않습니다. globals 구성 설정을 통해 전역 변수를 활성화하거나, vitest 모듈에서 가져오기를 사용하도록 코드를 업데이트할 수 있습니다.

전역 변수를 비활성화하는 경우, testing-library와 같은 일반적인 라이브러리가 자동 DOM 정리를 실행하지 않을 수 있습니다.

모듈 목(Mock)

Jest에서 모듈을 목(mock)할 때 팩토리 함수의 반환 값은 기본 내보내기(default export)로 간주됩니다. Vitest에서는 팩토리 함수가 각 내보내기가 명시적으로 정의된 객체를 반환해야 합니다. 예를 들어 다음 jest.mock은 다음과 같이 업데이트해야 합니다.

- jest.mock('./some-path', () => 'hello')
+ vi.mock('./some-path', () => ({
+   default: 'hello',
+ })

자세한 내용은 vi.mock API 섹션을 참조하십시오.

자동 목(Mock) 동작

Jest와 달리, <root>/__mocks__ 디렉터리의 목(mock) 모듈은 vi.mock()이 호출되지 않으면 자동으로 로드되지 않습니다. Jest와 같이 모든 테스트에서 목(mock) 처리해야 하는 경우, setupFiles 내에서 목(mock)을 설정할 수 있습니다.

목(Mock)된 패키지의 원본 가져오기

패키지를 부분적으로만 목(mock)하는 경우, Jest의 requireActual 함수를 사용했을 수 있습니다. Vitest에서는 이러한 호출을 vi.importActual로 대체해야 합니다.

- const { cloneDeep } = jest.requireActual('lodash/cloneDeep')
+ const { cloneDeep } = await vi.importActual('lodash/cloneDeep')

환경 변수

Jest와 마찬가지로 Vitest는 이전에 값이 설정되지 않은 경우 NODE_ENV를 test로 설정합니다. Vitest에는 JEST_WORKER_ID에 해당하는 VITEST_POOL_ID도 있습니다. VITEST_POOL_ID는 항상 maxThreads보다 작거나 같으므로, 해당 변수를 사용하는 경우 이름을 변경하십시오. Vitest는 또한 실행 중인 작업자의 고유 ID인 VITEST_WORKER_ID를 제공합니다. 이 숫자는 maxThreads의 영향을 받지 않으며, 생성된 각 작업자마다 증가합니다.

환경 변수를 수정하려면 Jest에서 replaceProperty API를 사용했다면, Vitest에서는 vi.stubEnv를 사용하여 동일한 작업을 수행할 수 있습니다.

Done 콜백 함수

Vitest v0.10.0부터 테스트를 선언하는 콜백 방식은 더 이상 사용되지 않습니다. async/await 함수를 사용하거나 Promise를 사용하여 콜백 스타일을 모방하도록 코드를 다시 작성할 수 있습니다.

- it('should work', (done) => {
+ it('should work', () => new Promise(done => {
    // ...
    done()
- })
+ }))

훅(Hook)

beforeAll/beforeEach 훅(Hook)은 Vitest에서 테어다운(teardown) 함수를 반환할 수 있습니다. 따라서 undefined 또는 null 이외의 값을 반환하는 경우 훅(Hook) 선언을 다시 작성해야 할 수 있습니다.

- beforeEach(() => setActivePinia(createTestingPinia()))
+ beforeEach(() => { setActivePinia(createTestingPinia()) })

타입

Vitest는 Vi 네임스페이스에 많은 타입을 노출하지 않습니다. 주로 매처(matcher) 호환성을 위해 존재하므로, Vi 네임스페이스 대신 vitest에서 직접 타입을 가져와야 할 수 있습니다.

- let fn: jest.Mock<string, [string]>
+ import type { Mock } from 'vitest'
+ let fn: Mock<[string], string>

또한 Vitest는 diff에서 볼 수 있듯이 Returns 대신 첫 번째 인수로 Args 타입을 사용합니다.

타이머

Vitest는 Jest의 레거시 타이머를 지원하지 않습니다.

Vue 스냅샷 테스트

이것은 Jest 특정 기능은 아니지만, 이전에 vue-cli 프리셋과 함께 Jest를 사용한 경우 jest-serializer-vue 패키지를 설치하고 setupFiles 내에서 사용해야 합니다.

vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    setupFiles: ['./tests/unit/setup.js'],
  },
});

tests/unit/setup.js

import vueSnapshotSerializer from 'jest-serializer-vue';

expect.addSnapshotSerializer(vueSnapshotSerializer);

그렇지 않으면 스냅샷에서 " 문자가 이스케이프되어 표시될 수 있습니다.