728x90
728x90

리액트 애플리케이션 테스트 환경 구축하기 (Vite, TypeScript, React)

들어가며

  • Vite, TypeScript, React를 이용하여 프로젝트 템플릿을 생성하고, 리액트 애플리케이션 테스트 환경을 구축하는 방법을 정리해본다.

 

방법

1️⃣ 프로젝트 생성하기

Vite 프로젝트 설정하기

  • 프로젝트 이름을 설정한다.
  • @React@와 @TypeScript@를 선택한다.
$ npm create vite@latest

 

의존성 설치하기

  • 아래의 명령을 실행하여 패키지를 설치한 후, 실행해본다.
$ npm install
$ npm run dev

 

2️⃣ Vite 환경에서 테스트 설정하기

Vitest 설치하기

  • 아래의 명령을 실행하여 Vitest를 설치한다.
$ npm install -D vitest

 

Vitest
  • Vite 기반의 빠르고 간편한 JavaScript/TypeScript 테스트 프레임워크
  • Vite의 빌드 속도를 활용하여 더욱 빠른 테스트 실행이 가능하다.
  • Jest와 유사한 API를 제공한다. (@describe@, @it@, @expect@ 등)
  • 별도 설정 없이 TypeScript를 지원하며, Jest의 비스한 방식으로 Mocking 및 Spy 기능을 지원한다.
  • 병렬 실행 및 핫 모듈 리로딩(HML) 기능을 지원한다.
  • Node 및 브라우저 환경 테스트를 지원한다. (JSDOM과 함께 사용 가능)

 

package.json 파일 수정하기

  • 프로젝트 최상위 경로에 있는 @package.json@ 파일에 다음과 같은 스크립트를 추가한다.
/package.json
{
  // ...
  "scripts": {
    "test": "vitest"
  }
  ///
}

 

테스트 파일 생성 및 실행해보기

  • @/src@ 경로에 샘플 테스트 파일을 만들어본다.

 

./src/random.test.ts
import { describe, test, expect } from 'vitest';

describe("basic math", () => {
    test("1 + 1 equals 2", () => {
        expect(1 + 1).toBe(2);
    });
});

 

  • 아래의 명령을 실행하여 테스트를 해볼 수 있다.
$ npm test

 

  • 정상적으로 실행되면 다음과 같이 테스트 통과 메시지가 터미널에 출력된다.

테스트를 통과한 모습

 

3️⃣ React Testing Library 및 JSDOM 설정하기

필요한 라이브러리 설치하기

  • 아래의 명령을 실행하여 필요한 라이브러리를 설치한다.
$ npm install -D @testing-library/react @testing-library/jest-dom jsdom @testing-library/user-event

 

React Testing Library(RTL)
  • 리액트 컴포넌트를 테스트하기 위한 라이브러리
  • 사용자의 실제 상호작용과 유사한 방식으로 테스트를 수행한다. (사용자 관점의 테스트 지향)
  • JSDOM을 활용하여 가상 브라우저 환경에서 테스트가 가능하다.
  • Jest, Vitest 등의 테스트 프레임워크와 호환된다.
    • 단독 실행을 할 수는 없으며, 반드시 테스트 러너가 필요하다.
  • @queryBy@, @getBy@, @findBy@ 등의 메서드를 활용한 접근성이 개선되었다.
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';

import MyComponent from './MyComponent';

test('renders a button and clicks it', async () => {
  render(<MyComponent />);
  
  const button = screen.getByRole('button', { name: /click me/i });
  expect(button).toBeInTheDocument();

  await userEvent.click(button);
  expect(button).toHaveTextContent('Clicked');
});

 

JSDOM
  • Node.js 환경에서 브라우저의 DOM을 시뮬레이션하는 라이브러리 (Node.js에서 가상 DOM 환경 제공)
  • React Testing Library, Jest, Vitest와 같은 UI 테스트 도구가 브라우저 환경 없이 테스트를 수행할 수 있도록 해준다.
  • DOM API 및 브라우저 이벤트를 시뮬레이션 할 수 있다.
import { JSDOM } from 'jsdom';

const dom = new JSDOM(`<html><body><p>Hello, world!</p></body></html>`);
console.log(dom.window.document.querySelector('p').textContent); // "Hello, world!"

 

＠testing-library/user-event
  • React Testing Library(RTL)에서 사용자 입력 및 이벤트 시뮬레이션을 보다 현실적으로 수행할 수 있도록 도와주는 라이브러리
  • @fireEvent@보다 실제 브라우저에서 일어나는 이벤트 흐름을 더욱 직관적이고 정확하게 재현해준다.
  • 비동기적인 이벤트(키 입력, 마우스 클릭 등)를 처리할 수 있다.
  • React, Vue, Angular 등 다양한 프레임워크에서 사용할 수 있다.

 

Vite 설정 파일 변경하기

  • Vite 설정 파일(@vite.config.ts@)에 아래의 내용을 추가해준다.

 

/vite.config.ts
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

// https://vite.dev/config/
export default defineConfig({
    plugins: [react()],
    test: {
        environment: 'jsdom',
        globals: true,
        setupFiles: './src/vitest.setup.ts'
    }
});

 

Vitest 설정 파일 추가하기

  • @/src@ 경로에 Vitest 설정 파일(@vitest.setup.ts@)을 생성하고, 아래의 내용을 입력해준다.

 

/src/vitest.setup.ts
import { expect, afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';
import * as matchers from '@testing-library/jest-dom/matchers';

expect.extend(matchers);

afterEach(() => {
    cleanup();
});

 

위의 코드는 각각의 테스트 실행 후 가상 DOM을 정리(Clean Up)하도록 해준다.

 

TypeScript 설정 파일 변경하기

  • TypeScript 설정 파일(@tsconfig.app.json@)에 다음과 같은 내용을 추가한다.
{
  // ...
  "compilerOptions": {
    "types": ["vitest/globals", "@testing-library/jest-dom"]
  }
  // ...
}

 

4️⃣ 리액트 컴포넌트 테스트해보기

테스트할 컴포넌트 생성하기

  • @/src@ 경로에 테스트할 샘플 컴포넌트를 생성해본다.

 

/src/Random.tsx
const Random = () => {
    return <div>Random</div>;
};

export default Random;

 

테스트 파일 생성하기

  • @/src@ 경로에 @__tests__@ 폴더를 생성하고, 해당 폴더 안에 다음과 같은 테스트 파일을 생성한다.

 

/src/__tests__/Random.test.tsx
import { describe, test, expect } from 'vitest';
import { render, screen } from '@testing-library/react';

import Random from '../Random';

describe("Random Component", () => {
    test("renders correctly", () => {
        render(<Random />);
        screen.debug();
        
        // 컴포넌트 안에 random 문자(대소문자 고려 X)가 있는지 테스트하기
        const element = screen.getByText(/random/i);
        expect(element).toBeInTheDocument();
    });
});

 

테스트 실행하기

  • 아래의 명령을 실행하여 테스트를 수행해본다.
$ npm test

 

Vitest + React Testing Library(RTL) + JSDOM을 함께 사용하면 강력한 프론트엔드 테스트 환경을 구축할 수 있다.

 

참고 사이트

 

Vitest with React Testing Library In React(created with Vite)

Vitest is a replacer for the Jest testing library, especially for projects(in our case, React) created with Vite. Previously, React…

victorbruce82.medium.com

 

728x90
728x90
저작자표시 비영리 변경금지 (새창열림)

'DevOps > Testing' 카테고리의 다른 글

[Testing] 소프트웨어 테스트 방법  (0) 2025.02.15

티스토리툴바