[Vite] TypeScript 기반 React 프로젝트에 테스트 환경 구성하기

개요

이번 블로그 포스트에서는 Vite를 사용하여 생성한 TypeScript 기반 React 프로젝트에 테스트 환경을 구성하는 방법에 대해서 알아보도록 하겠습니다. 또한, Jest와 React Testing Library를 사용하여 테스트 코드를 작성하는 방법에 대해서도 알아봅시다.

블로그 시리즈

이 블로그 포스트는 시리즈로 제작되었습니다. 다음은 Vite의 시리즈 리스트입니다.

[Vite] TypeScript 기반 React 프로젝트 시작하기
[Vite] TypeScript 기반 React 프로젝트에 테스트 환경 구성하기
[Vite] TypeScript 기반 React 프로젝트에 Prettier 추가하기
[Vite] TypeScript 기반 React 프로젝트에 Stylelint(CSS-in-JS) 추가하기

Jest 설치

Jest는 페이스북에서 만든 테스트 프레임워크로, React 프로젝트에서 가장 많이 사용되는 테스트 프레임워크입니다. Jest를 사용하면 JavaScript에 대한 테스트 코드를 작성하고 실행할 수 있습니다.

Vite를 사용하여 생성한 TypeScript 기반 React 프로젝트에 Jest를 설치하려면 다음 명령어를 실행합니다.

npm i -D jest @types/jest ts-jest
# yarn add -D jest @types/jest ts-jest

jest: Jest를 설치합니다.
@types/jest: Jest의 타입 정의 파일을 설치합니다.
ts-jest: TypeScript를 사용하여 Jest를 실행할 수 있도록 지원하는 패키지입니다.

Testing Library 설치

React Testing Library는 React 컴포넌트를 테스트하는 데 사용되는 라이브러리입니다. React Testing Library를 사용하면 React 컴포넌트의 렌더링 결과를 검증하거나 이벤트를 발생시키는 등의 테스트를 작성할 수 있습니다.

Vite를 사용하여 생성한 TypeScript 기반 React 프로젝트에 React Testing Library를 설치하려면 다음 명령어를 실행합니다.

npm i -D jest-environment-jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event jest-svg-transformer identity-obj-proxy
# yarn add -D jest-environment-jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event jest-svg-transformer identity-obj-proxy

jest-environment-jsdom: Jest에서 jsdom 환경을 사용할 수 있도록 지원하는 패키지입니다.
@testing-library/react: React Testing Library를 설치합니다.
@testing-library/jest-dom: Jest에서 React Testing Library를 사용할 수 있도록 지원하는 패키지입니다.
@testing-library/user-event: React Testing Library에서 사용되는 이벤트를 발생시키는 패키지입니다.
jest-svg-transformer: Jest에서 SVG 파일을 사용할 수 있도록 지원하는 패키지입니다.
identity-obj-proxy: CSS Module을 사용하는 경우 Jest에서 CSS Module을 사용할 수 있도록 지원하는 패키지입니다.

Jest 기본 설정

Jest를 사용하여 TypeScript 기반 React 프로젝트를 테스트하려면 Jest를 설정할 필요가 있습니다. 다음 명령어를 실행하여 루트 폴더에서 다음 명령어를 실행하여 Jest 설정 파일을 생성합니다.

npx ts-jest config:init
# yarn ts-jest config:init

그럼 루트 폴더에 Jest의 설정 파일인 jest.config.js 파일이 생성되는 것을 확인할 수 있습니다. 해당 파일을 열면 다음과 같은 내용을 확인할 수 있습니다.

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

Vite를 사용하여 생성한 프로젝트는 디폴트 모듈 시스템이 ES Modules이기 때문에 다음과 같이 module.export(CommonJS 모듈 시스템)를 export default(ES Modules 시스템)로 변경해야 합니다.

/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

또 CommonJS와 ES modules에 차이에 의해 테스트 실행시 경고가 발생할 가능성이 있습니다. 이를 방지하기 위해 tsconfig.json 파일을 열고 다음과 같이 esModuleInterop 옵션을 설정합니다.

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

jest-environment-jsdom 설정

Jest의 기본 테스트 환경은 다음과 같이 node로 설정되어 있습니다.

/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

하지만, React 테스트는 DOM 환경에서 실행되어야 하기 때문에 다음과 같이 jest-environment-jsdom을 사용하도록 설정할 필요가 있습니다.

/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
  preset: 'ts-jest',
  testEnvironment: 'jest-environment-jsdom',
};

React Testing Library 설정

React Testing Library로 React 컴포넌트를 테스트하기 위해 React Testing Library에서 제공하는 Jest용 Matchers를 사용할 수 있도록 설정할 필요가 있습니다.

React Testing Library가 제공하는 Jest용 Matchers를 설정하기 위해 루트 폴더에 jest.setup.ts 파일을 생성하고, 다음과 같이@testing-library/jest-dom을 import합니다.

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

그런 다음 다시 jest.config.js 파일을 열고 다음과 같이 setupFilesAfterEnv 옵션을 추가합니다.

/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
  preset: 'ts-jest',
  testEnvironment: 'node',
  setupFilesAfterEnv: ['./jest.setup.ts'],
};

Jest의 테스트 파일에서 React Testing Library의 Matchers의 타입을 사용할 수 있도록 하기 위해, tsconfig.json 파일을 열고 다음과 같이 types 옵션을 추가합니다.

{
  ...
  "compilerOptions": {
    "esModuleInterop": true,
    "types": ["@testing-library/jest-dom"],
    ...
  },
  ...
}

CSS와 SVG파일의 설정

CSS 파일과 SVG 파일을 Jest에서 사용할 수 있도록 설정하기 위해 jest.config.js 파일에 다음과 같이 moduleNameMapper 옵션을 추가할 필요가 있습니다.

/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
  preset: 'ts-jest',
  testEnvironment: 'jest-environment-jsdom',
  setupFilesAfterEnv: ['./jest.setup.ts'],
  moduleNameMapper: {
    '^.+\\.svg$': 'jest-svg-transformer',
    '\\.(css|less|scss)$': 'identity-obj-proxy',
  },
};

Jest 실행

이제 Jest와 React Testing Library를 사용하여 TypeScript 기반 React 프로젝트를 테스트할 수 있습니다. Jest를 사용하여 테스트를 실행할 수 있도록 하기 위해 package.json 파일을 열고 다음과 같이 수정합니다.

"scripts": {
  ...
  "test": "jest --watchAll",
  "test:ci": "jest --ci"
},

수정이 완료되었다면 다음 명령어를 실행하여 Jest를 실행합니다.

npm run test
# yarn test

그럼 다음과 같이 Jest가 잘 실행되는 것을 확인할 수 있습니다.

No tests found, exiting with code 0

Watch Usage
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.

현재는 테스트 코드를 작성하지 않았기 때문에 No tests found라는 메시지가 출력되는 것을 확인할 수 있습니다.

테스트 코드 작성

이제 Jest와 React Testing Library를 사용하여 TypeScript 기반 React 프로젝트에서 테스트 코드를 작성하는 방법에 대해서 알아보도록 하겠습니다. Jest와 React Testing Library를 사용하여 테스트 코드를 작성하기 위해, src 디렉토리에 App.test.tsx 파일을 생성하고 다음과 같이 수정합니다.

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

describe('<App />', () => {
  it('Rendered well', async () => {
    const { container } = render(<App />);

    expect(screen.getByAltText('Vite logo')).toBeInTheDocument();
    expect(screen.getByAltText('React logo')).toBeInTheDocument();
    expect(screen.getByText('Vite + React')).toBeInTheDocument();

    expect(container).toMatchSnapshot();
  });
});

Jest와 React Testing Library를 사용하여 Vite 로고와 React 로고, 그리고 Vite + React 텍스트가 잘 렌더링되는지 확인하는 테스트 코드를 작성하였습니다.

작성한 테스트 코드를 실행하기 위해, 터미널에서 다음 명령어를 실행하여 테스트를 실행합니다.

npm run test
# yarn test

그럼 이전과는 다르게 다음과 같이 테스트 결과가 출력되는 것을 확인할 수 있습니다.

  PASS  src/App.test.tsx
  <App />
    ✓ Rendered well (20 ms)

 › 1 snapshot written.
Snapshot Summary
 › 1 snapshot written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 written, 1 total
Time:        1.749 s, estimated 2 s
Ran all test suites.

Watch Usage
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.

또한 toMatchSnapshot을 사용하여 스냅샷 테스트를 작성하였기 때문에 __snapshots__ 디렉토리에 스냅샷 파일이 생성되는 것을 확인할 수 있습니다.

완료

이것으로 Vite를 사용하여 생성한 TypeScript 기반 React 프로젝트에 테스트 환경을 구성하는 방법에 대해서 알아보았습니다. 이제 Jest와 React Testing Library를 사용하여 테스트 코드를 작성하여 안전하고 안정적인 React 프로젝트를 개발해 보시기 바랍니다.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!