React + Vite + Typescript + Jest 템플릿 세팅하기

들어가기

React + Vite + Typescript + Jest로 기본 템플릿 세팅을 진행 했을때 Jest 세팅을 제외한 다른 부분은 문제가 없었는데 Typescript에 Jest를 추가해서 그런지 공식문서를 보고 세팅을 진행 했음에도 Jest세팅 하나에 무려 5시간이 넘게 걸렸다 :(

 

2022.10.31 추가

해당 환경 Jest대신 Cypress를 적용해서 사용해보려 했으나 Cypress에서 자체적으로 vite를 지원하지 않아서 문제가 생겼다..

Cypress에서 vite지원용 패키지를 설치해봤으나 여전히 안됨..

1. Vite + React + Typescript 설치하기

기본적인 설치는 Vite에서 보일러 플레이트 코드가 있어 간단하게 설치할 수 있었다.

$ npm init vite@latest --template
$ yarn or npm i

// 1. npm init vite@latest --template
// 2. package name 입력
// 3. 원하는 템플릿 선택
// 4. 설치 완료 후 yarn or npm i

2. 실행 포트 변경

설치 완료 후 실행해보니 5173 포트로 실행됐다. 실행 포트 변경은 vite.config.ts에서 아래 코드를 추가해 변경 할 수 있다.

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  // 추가
  server: {
    port: 3000
  }
})

3.  커스텀 path 추가

개발에 필요한 경로 설정은 tsconfig.json에 아래처럼 추가해주고

"compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "~/*": ["src/*"]
  }
}

 

vite.config.ts를 아래와 같이 수정해준다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// 추가
import paths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  // paths() 추가
  plugins: [react(), paths()],
  server: {
    port: 3000,
  },
});

4. 문제의 Jest 세팅

우선 내기준 공식 문서대로 세팅 진행 시 문제가 많았다. (공식 문서 나온 것만 설치해서 진행하니 에러만 뜸..)

$ jest 
$ babel-jest 
$ jest-environment-jsdom 
$ @testing-library/react 
$ @babel/preset-typescript
$ @babel/preset-env 
$ @babel/preset-react

$ react-test-renderer // 선택사항: 공식상에선 snapshot testing에서 사용한다

 

그리고 .babelrc 파일을 만들고 아래와 같은 내용을 추가한다.

여기서 runtime: "automatic"를 안넣었더니 ReferenceError: React is not defined에러 떠서 한참 삽질..

{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }],
    ["@babel/preset-react", { "runtime": "automatic" }],
    "@babel/preset-typescript"
  ]
}

 

마지막으로 jest.config.js 파일을 생성해 아래 내용을 추가하면 끝이다..!

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  moduleDirectories: ['node_modules', '<rootDir>/'], // node_modules 폴더 위치
  testEnvironment: 'jest-environment-jsdom', // 테스트 환경 설정
  moduleNameMapper: {
    '~/(.+)$': '<rootDir>/src/$1', // 커스텀 path
  },
};

커스텀 path같은 경우에는 기존에 tsconfig.json에 세팅해뒀는데 jest에서 테스트시 해당 경로를 읽지 못했다. 그래서 위 파일에 tsconfig.json 파일을 연결해 봤는데도 읽지 못해서 moudleNameMapper를 통해 tsconfig에 설정된 paths를 넣어줬다.

 

세팅 끝

세팅만 반나절은 한 것 같은데 일단 test까지는 잘 작동하는 것 같다.

 

https://github.com/yoonjihong/vite-react-ts-jest