1. 초기 테스트 환경 분석
package.json 파일을 확인하여 기존 테스트 관련 설정을 분석. 초기 상태에서는 eslint만 설정되어 있었으며, 별도의 테스트 프레임워크는 부재.
2. 테스트 프레임워크 설치
Vitest: Vite 기반 프로젝트를 위해 설계된 빠르고 가벼운 테스트 프레임워크입니다. Jest와 유사한 API를 제공하여 친숙하게 사용할 수 있으며, Vite의 빠른 개발 서버를 활용하여 효율적인 테스트 경험을 제공
Vitest 및 React Testing Library 관련 패키지 설치.
npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom3. Vite 설정 업데이트
vite.config.ts 파일에 Vitest 설정을 추가하여 테스트 환경을 구성.
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
base: '/',
plugins: [react(), tailwindcss()],
test: {
globals: true,
environment: 'jsdom',
setupFiles: './src/setupTests.ts',
},
});4. 테스트 환경 설정 파일 생성
@testing-library/jest-dom 매처 활성화를 위한 src/setupTests.ts 파일 생성.
// src/setupTests.ts
import '@testing-library/jest-dom';
// Mock ResizeObserver
global.ResizeObserver = class ResizeObserver {
observe() {}
unobserve() {}
disconnect() {}
};
// Mock scrollIntoView
window.HTMLElement.prototype.scrollIntoView = function() {};5. 테스트 스크립트 추가
package.json 파일의 scripts 섹션에 테스트 실행 스크립트 추가.
// package.json (scripts 부분)
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview",
"test": "vitest",
"test:ui": "vitest --ui",
"coverage": "vitest run --coverage"
},6. 초기 테스트 파일 생성 및 수정
src/App.test.tsx 파일 생성. 초기 생성 시 발생한 "Unexpected end of file" 오류는 파일 내용 재작성으로 해결.
useLocation() 훅 사용으로 인한 오류 해결을 위해 App 컴포넌트를 <BrowserRouter>로 감쌈.
// src/App.test.tsx
import { render, screen } from '@testing-library/react';
import App from './App';
import { describe, it, expect } from 'vitest';
import { BrowserRouter } from 'react-router-dom';
describe('App', () => {
it('renders the main heading', () => {
render(
<BrowserRouter>
<App />
</BrowserRouter>
);
// App.tsx 파일에 "Vite + React" 텍스트가 있다고 가정합니다.
// 실제 App.tsx 내용에 따라 이 부분을 수정해야 합니다.
expect(screen.getByText(/확정/i)).toBeInTheDocument();
});
});7. 브라우저 API 모의(Mocking)
JSDOM 환경에서 ResizeObserver 및 scrollIntoView가 정의되지 않아 발생하는 오류 해결. src/setupTests.ts 파일에 해당 API들의 모의 구현 추가.
8. 텍스트 불일치 오류 해결
App 컴포넌트의 렌더링 내용 변경으로 인해 screen.getByText(/Vite \+ React/i)가 실패. 실제 렌더링되는 텍스트인 "확정"으로 expect 구문 수정.
9. 최종 테스트 코드의 의미
현재 src/App.test.tsx의 테스트 코드는 App 컴포넌트를 렌더링했을 때, 화면에 "채팅"이라는 텍스트가 포함된 요소가 나타나는지 확인. 이는 App 컴포넌트가 예상대로 초기 UI를 구성하는지 검증하는 기본적인 통합 테스트
10. 결론.
Gemini CLI를 활용하여 vitest로 App component에 대한 테스트를 진행하였다.
AI가 알아서 테스트 코드를 짜주고, 어떻게 활용해야하는지 알려주는 것을 보며
AI의 발전이 참 빠르다...
아 물론 1~9도 gemini가 요약해준 것...
프론트엔드 테스트에 대해 공부하고, 알고 진행했을 때의 글과 한번 추후에 비교해보자.
