Vite Typescript 환경에서 Jest 설치하기

😎너무 좋은 블로그

https://velog.io/@thdrldud369/Vite-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-jest-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0

Vite 프로젝트에 Jest 추가하기

전적으로 이 블로그를 참고하면서 포스트를 진행했습니다.

https://github.com/XionWCFM/vite-mui

GitHub - XionWCFM/vite-mui: vite-mui

jest가 포함된 제 보일러플레이트는 이 깃허브 링크에서 확인할 수 있습니다.

 

다만 조금 문제가 있는 부분이 있어 그부분은 해결하면서 진행했습니다.

npm i -D jest @types/jest ts-node ts-node ts-jest @testing-library/react identity-obj-proxy jest-environment-jsdom @testing-library/jest-dom jest-svg-transformer

 

타입스크립트에서 jest를 사용하기 위해 깔아주어야 하는 종속성들을 깔아줍니다.

 

package.json에 스크립트를 추가합니다.

"scripts":{
    ...
    "test": "jest"
 }

이 스크립트는 npm 을 패키지매니저로 사용하는 경우

npm run test

로 트리거할 수 있습니다.

루트폴더에 이제 jest.config.ts를 생성합니다.

export default {
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.tsx?$": "ts-jest",
  },
  moduleNameMapper: {
    "^.+\\.svg$": "jest-svg-transformer",
    "\\.(css|less|sass|scss)$": "identity-obj-proxy",
  },
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
};

 

마찬가지로 루트 폴더에 jest.config.ts를 생성해줍니다.

import "@testing-library/jest-dom/extend-expect";

 

이때 module에 lint 에러가 발생했는데

위 블로그에서는 .eslintrc.cjs에 이 값을 추가하라고 했지만

module.exports = {
  env: {
    ...,
  	module: "node",
  }
}

실제로 이 키를 추가하게되면 module이 unkown이기 때문에

추가하고 린트를 돌려보면 .eslintrc.cjs 파일에서 린팅에러가 발생합니다.

 

고민 해본 결과 루트폴더에 .eslintignore를 생성하고

jest.config.ts와 jest.setup.ts를 무시하는 방식으로 진행했습니다.

 

.eslintignore

.eslintrc.cjs
jest.config.ts
jest.setup.ts

 

tsconfig.json

{
	"compilerOptions":{
      	...,
		"esModuleInterop": true      
    }
}

컴파일러 옵션에 EsmoduleInterop을 켜줍니다.

 

src폴더 내부에 __tests__ 폴더를 생성한 뒤

App.test.tsx 파일을 생성하고 다음 내용을 입력해주었습니다.

import App from '../App';
import { render, screen } from '@testing-library/react';

test('페이지가 제대로 뜨나요?', async () => {
  render(<App />);
  const umbutton = await screen.findByRole('button');
  expect(umbutton.innerHTML).toBe('엄준식');
});

최대한 간단한 테스트를 만들었습니다.

의미는 간단합니다.

App 컴포넌트를 렌더링 시켜보고 button을 찾은다음

button의 내부 텍스트가 "엄준식" 이면 테스트를 통과합니다.

 

이제 App.tsx 파일로 돌아가 테스트를 통과하기 위한 코드를 작성하겠습니다.

function App() {
  return (
    <div>
        <div>암</div>
        <button>엄준식</button>
    </div>
  );
}

export default App;

내부 텍스트가 엄준식인 버튼을 생성했습니다.

npm run test

를 돌려보면

 

이게 되네요..