1. 관련 패키지 설치

npm install -D jest
npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event

jest - JavaScript 테스트 러너. DOM에 접근하게 하는 jsdom을 통해서 어떻게 브라우저가 작동하는지 테스트 할 수 있다.

@testing-library/react - 테스트 환경 안에서 리액트 컴포넌트들을 렌더링할 수 있게 해준다.

@testing-library/jest-dom - DOM과 관련된 matcher(ex: toHaveValue() 함수처럼 일치하는지 확인하는 함수)들을 추가해준다.

참고

GitHub - testing-library/jest-dom: Custom jest matchers to test the state of the DOM

@testing-library/user-event - 컴포넌트들과 상호작용할 수 있게 해준다.

npm install -D vite-jest
npm install -D jest-environment-jsdom

vite로 설치한 react에서 jest를 사용하기 위해 설치

1. jest.config.js 파일 생성

//jest.config.js

module.exports = {
  preset: 'vite-jest',

  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
	//셋업파일 위치
  testMatch: [
    '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
    '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
  ], //src폴더 내부에 test나 spec 이름을 포함한 파일을 test 대상으로 한다.
  testEnvironment: 'jest-environment-jsdom',
  //test가 진행되는 환경
};

1. vite.config.ts 파일 수정

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [
    react({
			//이 부분 추가
      fastRefresh: process.env.NODE_ENV !== 'test',
    }),
  ],

	...

});

1. package.json 파일 test script 수정

//package.json

...

"scripts": {
    "dev": "npx vite",
    "build": "tsc && npx vite build",
    "serve": "npx vite preview",
    "test": "vite-jest --no-cache"
		//npm test 시 실행되는 명령어인데 vite-jest 이후 옵션값을 --watch로 줘서
		//관련 파일을 계속 watch 하게 하고싶은데 현재는 오류가 나고있음.
  },

...