[Next, vitest] Next.js에 vitest 적용해보기(기록용)

목차

 

 

 개요

next.js를 통해 개발을 하던 중 vitest를 사용해 테스팅을 해보고싶었다 그래서 처음부터 설정까지를 다시 복기하려고한다.

 

 사용 버전

nextjs : 15.0.3

react : "^18"

 

 

 설치

https://nextjs.org/docs/app/building-your-application/testing/vitest

Testing: Vitest | Next.js

next.js 15버전을 통해 개발할거기때문에 버전에맞는 공식문서에서 vitest를 어떻게 사용하라하는지 문서를 확인하였다.

 

vitest.config.mts 파일 제작

공식문서에선 해당 파일을 root에 만들라고한다 그래서 프로젝르 root에서 vitest.config.mts 를 아래와같이 공식문서에 있는 내용으로 만들어준다.

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
 
export default defineConfig({
  plugins: [tsconfigPaths(), react()],
  test: {
    environment: 'jsdom',
  },
})

 

package.json 수정

package.json에 test 명령어를 추가해달라 한다

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "vitest" // <-- 요거
  }
}

 

vitest 설치

https://vitest.dev/guide/

Vitest

여기서 설치하라는 방법에 맞춰 설치한다.

필자는 테스트하려는 프로젝트는 yarn이였기에 yarn으로 설치하였다.

 

 실행해보기

위 과정을 하고 test 명령어를 수행하면 vitest가 수행이 된다.

위 설치과정에서 vitest.config.mts에 사용하는 import가 설치가 안되었다면 설치 요구하는 것마다 맞춰서 설치해주자

그럼 끝!

 

 마치며

위 내용을통해서 Next.js가 공식으로 제안하는 vitest 세팅을 맞췄으며 이제 테스팅 파일을만들어 진행하면된다!