◀️ 🌱 April 🌱 ▶️
일	월	목	금	토
		0	0	0
0	0	0	0	0
0	0	0	0	0
0	0	0	0	0
0	0

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

2025. 2. 15. 20:38

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

저작자표시 비영리 변경금지

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

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

Per ardua ad astra."Hello, World!" 🤖

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Per ardua ad astra.

"Hello, World!"