[React] Vite 타입 스크립트 프로젝트에 Jest 사용 환경 설정

안녕하세요. J4J입니다.

 

이번 포스팅은 Vite 타입 스크립트 프로젝트에 Jest 사용 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

관련 글

 

[React] Vite 사용하기

 

 

반응형

 

 

Jest 사용 환경 설정

 

Jest를 이용하여 테스트 케이스를 작성하는 경우는 여러 가지 존재합니다.

 

Jest 내부에서만 작성되어 테스트하는 경우, 정의해 둔 모듈을 로드하여 테스트하는 경우, HTML element까지 접근하여 테스트하는 경우 등이 있습니다.

 

내부에서만 작성하는 경우부터 HTML element까지 접근하는 경우까지 점점 갈수록 더 많은 설정들이 필요한데, 일반적으로 React에서 Jest를 활용하는 경우 HTML element까지 접근하여 사용하기 때문에 이번 글에서는 한 번에 모든 설정을 해보겠습니다.

 

만약 세부적으로 필요한 것들만 설치를 원한다면 [React] 타입 스크립트(TypeScript) 환경에서 Jest를 이용하여 테스트하기를 참고해주시면 됩니다.

 

 

 

[ 1. 패키지 설치 ]

 

$ npm install -D jest @types/jest ts-jest @testing-library/jest-dom @testing-library/react jest-environment-jsdom @babel/preset-env babel-jest

 

 

 

[ 2. package.json scripts 추가 ]

 

{
  "scripts": {
    "test": "jest"
  },
}

 

 

 

[ 3. jest setup 파일 추가 ]

 

프로젝트 최상위 경로에 jest.setup.cjs를 생성한 뒤 다음과 같은 코드를 입력해 줍니다.

 

jest.setup 위치

 

import '@testing-library/jest-dom';

 

 

 

 

[ 4. jest를 위한 tsconfig 파일 추가 ]

 

프로젝트 최상위 경로에 tsconfig.jest.json을 생성한 뒤 다음과 같이 코드를 입력해 줍니다.

 

만약 tsconfig.json의 경로를 Vite 프로젝트를 생성한 이후 변경했다면 "extends" 값을 경로에 맞게 변경해주셔야 합니다.

 

tsconfig.jest 위치

 

{
  "extends": "./tsconfig.json", // tsconfig.json 설정 적용
  "compilerOptions": {
      "jsx": "react-jsx" // jsx 설정 react-jsx로 적용
  },
}

 

 

 

[ 5. jest 설정 파일 추가 ]

 

다음 명령어를 입력해 보면 프로젝트 최상위 경로에 jest.config.js 파일이 만들어지는 것을 확인할 수 있습니다.

 

$ npx ts-jest config:init

 

jest.config 위치

 

 

 

파일이 만들어지면 package.json의 type module 설정 때문에 확장자를 js에서 cjs로 변경해주셔야 합니다.

 

그리고 다음과 같이 코드를 입력해 줍니다.

 

만약 명령어가 적용이 안된다면 임의로 파일을 생성한 뒤 넣어주시면 됩니다.

 

변경된 jest.config 확장자

 

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jest-environment-jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.cjs'], // jest.setup을 이용하여 환경 설정
  transform: {
    // ts-jest를 이용하여 typescript 사용 환경 설정
    '^.+\\.(ts|tsx)$': ['ts-jest', {
      tsconfig: '<rootDir>/tsconfig.jest.json' // tsconfig.jest.json 사용 설정
    }],
    // babel-jest를 이용하여 javascrit 사용 환경 설정 (cjs파일에서 import 활용 등)
    '^.+\\.(js|cjs|jsx)$': 'babel-jest',
  },
};

 

 

 

[ 6. babel 설정 파일 추가 ]

 

babel-jest가 올바르게 동작될 수 있도록 babel 설정을 해줘야 합니다.

 

다음과 같이 프로젝트 최상위 경로에 babel.config.cjs 파일을 생성한 뒤 코드를 입력해주시면 됩니다.

 

babel.config 위치

 

module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
  ],
};

 

 

 

[ 7. 테스트 실행 ]

 

만약 다음과 같은 페이지에서 타이틀이 존재하는지 확인하는 테스트 케이스를 만드는 경우를 예시로 들어보겠습니다.

 

export default function App() {
  return (
    <main>
      <h2 data-testid='title-text'>Jest 환경 설정</h2>
    </main>
  )
}

 

 

 

테스트 케이스를 작성하는 파일은 {파일 명}.test.(ts|tsx)의 형태로 생성해 주면 되고 다음과 같이 파일을 생성한 뒤 코드를 작성해 볼 수 있습니다.

 

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

describe('app test', () => {
    test('jest title 테스트', () => {
        render(<App />);

        const titleText = screen.getByTestId('title-text');
        expect(titleText).not.toBeNull();
    })
})

 

 

 

코드가 작성되면 테스트 실행 명령어는 다음과 같이 입력해 볼 수 있습니다.

 

$ npm run test // 모든 테스트 파일 실행
$ npm run test {파일 명} // {파일 명}.test.(ts|tsx) 테스트 파일 실행
$ npm run test {경로} // 경로에 해당되는 테스트 파일 실행

 

 

 

 

TestingLibraryMatchers 함수 에러 이슈

 

해당 이슈는 테스트 파일에 다음과 같이 toBeInTheDocument를 포함한 testing library 함수 사용이 불가능하신 분들만 확인하시면 됩니다.

 

toBeInTheDocument 사용 불가 이슈

 

 

 

처음에 설치했던 패키지 중 하나인 @testing-library/jest-dom은 jest.setup 파일에서 모듈을 호출한 뒤 jest.config에서 활용되고 있습니다.

 

// jest.setup.cjs
require('@testing-library/jest-dom');


// jest.config.cjs
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jest-environment-jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.cjs'], // jest.setup을 이용하여 환경 설정
  transform: {
    // ts-jest를 이용하여 typescript 사용 환경 설정
    '^.+\\.(ts|tsx)$': ['ts-jest', {
      tsconfig: '<rootDir>/tsconfig.jest.json' // tsconfig.jest.json 사용 설정
    }],
    // babel-jest를 이용하여 javascrit 사용 환경 설정 (cjs파일에서 import 활용 등)
    '^.+\\.(js|cjs|jsx)$': 'babel-jest',
  },
};

 

 

 

그리고 현재 기준으로 해당 패키지를 설치할 경우 사용되는 버전은 6.1.3입니다.

 

// package.json
{
  "devDependencies": {
    "@testing-library/jest-dom": "^6.1.3",
  }
}

 

 

 

이와 같이 설정을 하게 되면 정상적인 경우 모든 테스트 파일에 jest.setup 파일에 설정한 소스가 적용되어 관련 함수들을 모두 사용할 수 있어야 합니다.

 

하지만 6 버전으로 넘어오면서부터 정확한 이슈는 무엇인지 모르겠지만 정상 적용이 되는 방법을 찾지 못하고 있습니다.

 

지금 기준으로 해당 문제를 해결할 수 있는 방법은 2가지입니다.

 

 

 

 

첫 번째는 테스트 파일마다 모두 setup 파일에 설정된 것을 넣어줍니다.

 

import '@testing-library/jest-dom'; // setup 코드 추가
import { render, screen } from '@testing-library/react';
import App from './App';


describe('app test', () => {
    test('testing library matchers 함수 에러 이슈', () => {
        render(<App />);

        const titleText = screen.getByTestId('title-text');
        expect(titleText).toBeInTheDocument();
    })
})

 

 

 

두 번째는 @testing-library/jest-dom의 버전을 낮추는 겁니다.

 

예를 들면 다음 명령어를 실행시켜 5 버전대로 낮추면 setup에 넣어둔 코드가 올바르게 적용되는 것을 확인할 수 있습니다.

 

$ npm install -D @testing-library/jest-dom@5.16.5

 

 

 

 

 

 

 

 

이상으로 Vite 타입 스크립트 프로젝트에 Jest 사용 환경 설정하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.