- 유닛 테스트 기술분석 : 왜 필요한지, 어떤 라이브러리가 있는지 관련 blog 작성
- Jest 기반 유닛 테스트 코드 작성 및 테스트
- Day 2에서 작성했던 컴포넌트 중, 유닛 테스트 2회 이상 수행하기
유닛 테스트란?
유닛 테스트는 작은 코드 단위(함수나 컴포넌트)가 제대로 작동하는지 확인하는 작업입니다.
예를 들어, 웹사이트에서 "버튼을 클릭하면 텍스트가 바뀌는지" 이런 동작들이 정확한지 체크할 수 있습니다. 이렇게 테스트를 해두면, 나중에 코드를 수정할 때 "이게 정말 잘 작동할까?"라는 걱정을 덜 수 있습니다.
왜 유닛 테스트가 필요한가?
유닛 테스트를 하는 이유는 버그(문제)를 미리 찾아내고 예방하기 위해서입니다.
예를 들어, 나중에 코드를 수정했을 때 그 수정으로 인해 문제가 생겼다면, 유닛 테스트가 이미 이를 알려줄 수 있게됩니다. 그래서 안전하게 코드를 수정하거나 새 기능을 추가할 수 있게 돕습니다.
유닛 테스트 라이브러리
Jest: Jest는 가장 많이 사용되는 유닛 테스트 도구 중 하나입니다.
설정이 간단하고, React나 JavaScript에서 사용됩니다. 또한 빠르게 테스트를 실행하고, 실패한 테스트는 쉽게 찾을 수 있게 도와줍니다.
Mocha: Node.js 환경에서 많이 사용됩니다.
비동기 테스트에 강점이 있어서 서버 관련 테스트에 유용합니다.
Chai: Chai는 Mocha와 함께 사용되는 라이브러리로, 테스트 결과를 좀 더 직관적으로 표현할 수 있게 도와줍니다. 어떤 값이 맞는지 확인하는 assertion을 쉽게 작성할 수 있습니다.
유닛 테스트: 두 번째 테스트 작성하기
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';
test('버튼을 클릭하면 텍스트가 바뀐다', () => {
render(<MyComponent />);
const button = screen.getByRole('button');
fireEvent.click(button);
const changedText = screen.getByText('텍스트 변경됨');
expect(changedText).toBeInTheDocument();
});
이 코드는 "버튼을 클릭했을 때 텍스트가 '텍스트 변경됨'으로 바뀌는지"를 테스트해요. 테스트가 성공하면, 이 버튼이 제대로 동작합니다.
지금까지 Jest로 유닛 테스트를 작성하고 있었고, Day 2에서 작성했던 컴포넌트에 대해서도 테스트를 진행해야 한다고 했습니다. 방금 전에 작성한 코드처럼 버튼을 클릭하면 텍스트가 바뀌는지 같은 간단한 테스트를 할 수 있습니다.
1. 첫 번째 테스트: SignIn 테스트
import { render, screen, fireEvent } from '@testing-library/react';
import SignIn from '../SignIn';
test('로그인 버튼을 클릭하면 로그인 폼이 제출된다', () => {
render(<SignIn />);
const usernameInput = screen.getByLabelText(/사용자 이름/i);
// 사용자 이름 입력 필드 찾기
const passwordInput = screen.getByLabelText(/비밀번호/i);
// 비밀번호 입력 필드 찾기
const submitButton = screen.getByRole('button', { name: /로그인/i });
// 로그인 버튼 찾기
// 입력 필드에 값 넣기
fireEvent.change(usernameInput, { target: { value: 'testuser' } });
fireEvent.change(passwordInput, { target: { value: 'password123' } });
// 로그인 버튼 클릭
fireEvent.click(submitButton);
// 로그인 성공 메시지 확인 (혹은 화면 변화 확인)
const successMessage = screen.getByText(/로그인 성공/i);
expect(successMessage).toBeInTheDocument();
});
SignIn.test.tsx에서 우리는 로그인 화면을 테스트했던 것 같아요. 사용자가 로그인 폼을 올바르게 제출할 수 있는지, 그리고 로그인에 필요한 필드들이 제대로 동작하는지 확인하는 내용입니다.
이 코드는 SignIn 컴포넌트에서 사용자 이름과 비밀번호를 입력하고 로그인 버튼을 클릭했을 때, 로그인 성공 메시지가 나타나는지 테스트하는 내용입니다. fireEvent.change()로 입력 필드에 값을 넣고, fireEvent.click()으로 버튼을 클릭하는 동작을 처리하고 있습니다.
2. 두 번째 테스트: Header 테스트
import { render, screen, fireEvent } from '@testing-library/react';
import Header from '../Header';
test('헤더에서 로그인/회원가입 버튼을 클릭하면 해당 페이지로 이동한다', () => {
render(<Header />);
const loginButton = screen.getByRole('button', { name: /로그인/i });
// 로그인 버튼 찾기
const signUpButton = screen.getByRole('button', { name: /회원가입/i });
// 회원가입 버튼 찾기
// 로그인 버튼 클릭
fireEvent.click(loginButton);
// 로그인 페이지로 이동했다고 가정하고, 해당 페이지의 요소가 있는지 확인
expect(screen.getByText(/로그인 페이지/i)).toBeInTheDocument();
// 회원가입 버튼 클릭
fireEvent.click(signUpButton);
// 회원가입 페이지로 이동했다고 가정하고, 해당 페이지의 요소가 있는지 확인
expect(screen.getByText(/회원가입 페이지/i)).toBeInTheDocument();
});
이 테스트는 로그인과 회원가입 버튼이 클릭될 때 해당 페이지로 잘 이동하는지를 확인하는 테스트입니다. fireEvent.click()으로 버튼 클릭을 시뮬레이션하고, 페이지 이동을 확인하는 방식입니다.
이렇게 SignIn과 Header 컴포넌트에 대한 유닛 테스트를 작성함으로써, 중요한 동작들이 잘 동작하는지 자동으로 확인할 수 있습니다. Jest를 사용하면 사용자와의 상호작용을 테스트하고, 컴포넌트가 올바르게 작동하는지 쉽게 검증할 수 있습니다.
