vite로 만든 프로젝트 테스트코드 작성하기(vitest)

프론트엔드 테스트 코드 작성에서 사용되는 보편적인 라이브러리가 RTL(React-Testing-Library)라고 한다. 해당 라이브러리를 사용하려고 보니 CRA로 만든 프로젝트에서는 기본적으로 환경설정이 되어 있지만 vite는 따로 설치하고 설정해줘야할게 많았다. 

React 테스트 환경 구축하기

 

과정이 무척 복잡하기도 하고 각 설정이 뭘 의미하는지 찾아보다가 vitest라는 것을 발견했다.

vite가 친절하게 why vite를 설명해준것처럼 vitest도 why vitest인지 설명해줬다. 모두 이해한건 아니지만 대충 이해한 것은 vitest는 jest에서 사용되는 대부분의 api를 지원하고 vite와 사용하기에 최적화 되어있다는 것이다.

Vitest

vitest로 세팅하는 4분짜리 영상에서 간단하게 시연하는 걸 보고 따라했다.

 

해당 영상엔 vite.config 파일이 js파일이어서 그냥 넘어가는데 ts파일이라면 타입을 지정해줘야한다.

Vitest defineConfig, 'test' does not exist in type 'UserConfigExport'

...
import type { InlineConfig } from 'vitest';
import type { UserConfig } from 'vite';
...

interface VitestConfigExport extends UserConfig {
  test: InlineConfig;
}

export default defineConfig({
  ...
  test: {
    environment: 'jsdom',
    globals: true,
    transformMode: {
      web: [/\.[jt]sx?$/],
    },
    setupFiles: './setupVitest.ts',
  },
  ...
} as VitestConfigExport);

그리고 영상엔 RTL을 사용했기 때문에 decribe, it과 같은 메서드를 아무런 import 문 없이 global 메서드처럼 사용했지만 vitest는 따로 import를 해줘야 한다.

 

 

From Jest to Vitest - Migration and Benchmark

추가로 useParams와 같이 라우터 돔이 필요한 테스트 코드일 경우 MemoryRouter를 이용해야한다

 

[React Router] useParams 테스트하기

vitest는 jest에서 사용하는 대부분의 api를 지원하기 때문에 테스트하는 방법들은 RTL을 사용한 테스팅 방법들을 참고하면 된다.