20단계: 테스트 작성 (Jest + React Testing Library)
좋습니다 🙂 이제 바이브코딩 입문 20단계를 정리해드릴게요. 이 단계는 테스트 작성(Jest/React Testing Library)을 통해 코드가 제대로 동작하는지 자동으로 검증하는 과정입니다.
🧪 20단계: 테스트 작성 (Jest + React Testing Library)
① 자연어 프롬프트 작성
AI에게 요청할 문장을 간단히 작성합니다.
React 로그인 컴포넌트에 대한 기본 테스트 코드를 작성해줘.
② AI가 제안하는 코드 예시
설치
npm install --save-dev jest @testing-library/react @testing-library/jest-dom
Login.test.js
import { render, screen, fireEvent } from "@testing-library/react";
import { AuthProvider } from "./AuthContext";
import Login from "./Login";
test("로그인 입력창과 버튼이 렌더링되는지 확인", () => {
render(
<AuthProvider>
<Login />
</AuthProvider>
);
// 입력창과 버튼 확인
const input = screen.getByPlaceholderText("아이디 입력");
const button = screen.getByText("로그인");
expect(input).toBeInTheDocument();
expect(button).toBeInTheDocument();
});
test("아이디 입력 후 버튼 클릭 시 로그인 함수 호출", () => {
render(
<AuthProvider>
<Login />
</AuthProvider>
);
const input = screen.getByPlaceholderText("아이디 입력");
const button = screen.getByText("로그인");
// 입력값 변경
fireEvent.change(input, { target: { value: "홍길동" } });
fireEvent.click(button);
// 화면에 메시지 출력 확인 (Profile 컴포넌트와 연결 시 더 확실히 검증 가능)
expect(input.value).toBe("홍길동");
});
③ 실행 및 확인
npm test실행 → Jest가 테스트 자동 실행- 입력창과 버튼이 정상적으로 렌더링되는지 확인
- 입력값 변경 및 버튼 클릭 시 상태가 반영되는지 검증
🎯 학습 포인트
- 자동화된 검증: 코드 변경 시 기능이 깨지지 않았는지 확인
- React Testing Library: 사용자 관점에서 컴포넌트 테스트
- Jest 활용: 단위 테스트와 스냅샷 테스트 가능
- 품질 향상: 테스트가 있으면 리팩토링과 확장이 훨씬 안전해짐
👉 이렇게 20단계를 마치면, 바로 21단계에서 배포 환경 최적화(Docker 컨테이너화)로 넘어가게 됩니다.
원하시면 제가 21단계 예시 코드(Dockerfile 작성)까지 바로 보여드릴까요?
