Vitest 간단 사용후기

 

 

최근에 vite 를 자주 사용하다보니 vitest 라는 테스팅 프레임워크도 알게 되었다.

간단하게만 사용해봤는데 일단은 너무 좋다..

 

실무에서 사용해보려면 UI, 모노레포 환경, cjs 라이브러리 사용에 대해 한 번 실증해봐야할 것 같다.

 

---

1. vite 프로젝트와 잘 맞음, 설정 간소화

jest 를 쓸 때 ts, esm 사용하면 jest.config.js 안에 줄줄 설정을 해줬어야 하는데,

vitest는 vite 프로젝트의 기본 설정을 가지고 할 수 있어서 설정할게 줄어든다.

 

vite.config.ts 에 테스트에 대한 설정을 함께 적용하면 되고, 분리도 가능하다.

아래처럼 타입을 위해 <reference types ~~ 해주고, test 안에 설정을 추가해주면 된다.

 

/// <reference types="vitest" />
import { defineConfig } from 'vite';
// import...

export default defineConfig(({ mode }) => {
  return {
    plugins: [remix(), UnoCSS(), tsconfigPaths()],
    test: {
      globals: true,
    },
  };
});

 

2. 친숙한 사용법

jest 에서 사용하던 describe, it, toBe 등을 사용하기 때문에

따로 공부할 필요가 없어서 좋다.

 

jest 처럼 항상 import 할 필요 없이 사용 할 수도 있다.

1번에 올려둔 설정처럼 globals:true 를 해주고 tsconfig types 에 "vitest/globals" 를 추가하면 된다.

 

3. 사용하기에 편리함

내가 생각하는 vitest 의 가장 큰 장점은 "테스트 결과가 UI 로 제공된다" 인 것 같다. (라이브러리 별도 설치 필요)

 

일단 아래는 vitest 의 테스트 결과 화면이다. 이건 jest 랑 별다를 바 없다.

차이점은 vitest 는 watch mode 가 기본이라는거?

 

왠지 jest 도 찾아보면 UI 환경을 제공하는 라이브러리가 있을 것 같긴하다.

아무튼 UI 환경은 아래와 같다.

 

나만 그런진 모르겠는데

터미널로 결과를 보면 가독성이 별로라 잘 안 읽히는데 UI 로 보면 깔끔해서 좀 더 잘 보인다.

테스트가 여러개 있을 때 그 장점이 더 두드러질 것 같다.

 

Code 탭에서는 코드를 수정해볼 수도 있다.

Console 탭에서는 코드에 찍어둔 콘솔이 표시된다.

 

---

굉장히 편리하다고 느꼈고

지금하고 있는 프로젝트하면서 실험을 좀 더 해봐야겠다.

 

요약

- UI 제공해주고 console 보기 좋게 표시해줘서 좋음, 설정할게 좀 더 적음