diff --git a/src/features/auth/container/login-form/LoginForm.test.tsx b/src/features/auth/container/login-form/LoginForm.test.tsx
index 2add16e1..72f83f25 100644
--- a/src/features/auth/container/login-form/LoginForm.test.tsx
+++ b/src/features/auth/container/login-form/LoginForm.test.tsx
@@ -1,57 +1,64 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import userEvent from '@testing-library/user-event';
import LoginForm from './LoginForm';
-jest.mock('react-hook-form', () => ({
- useForm: () => ({
- register: () => ({}),
- handleSubmit: (fn: any) => fn,
- formState: {
- isSubmitting: false,
- errors: {},
- isValid: true,
- },
- setError: jest.fn(),
- reset: jest.fn(),
- }),
-}));
-
-// next/navigation mock
jest.mock('next/navigation', () => ({
useRouter: () => ({
replace: jest.fn(),
}),
useSearchParams: () => null,
}));
-
-describe('LoginForm', () => {
- it('폼이 올바르게 렌더링되어야 한다', () => {
+describe('LoginForm UI 테스트', () => {
+ it('로그인 폼의 모든 UI 요소가 올바르게 렌더링되어야 한다', () => {
render();
- expect(screen.getByRole('heading', { name: '로그인' })).toBeInTheDocument();
expect(screen.getByLabelText('아이디')).toBeInTheDocument();
expect(screen.getByLabelText('비밀번호')).toBeInTheDocument();
+
expect(screen.getByRole('button', { name: '로그인' })).toBeInTheDocument();
+
+ expect(screen.getByText('회원가입')).toBeInTheDocument();
});
- it('이메일과 비밀번호를 입력할 수 있어야 한다', async () => {
+ it('입력 필드에 올바른 placeholder가 표시되어야 한다', () => {
+ render();
+
+ expect(screen.getByPlaceholderText('이메일')).toBeInTheDocument();
+ expect(screen.getByPlaceholderText('비밀번호')).toBeInTheDocument();
+ });
+});
+
+describe('LoginForm', () => {
+ it('이메일과 비밀번호를 입력했을 때 로그인 버튼이 활성화되어야 한다', async () => {
render();
const emailInput = screen.getByLabelText('아이디');
const passwordInput = screen.getByLabelText('비밀번호');
+ const submitButton = screen.getByRole('button', { name: '로그인' });
+
+ expect(submitButton).toBeDisabled();
await userEvent.type(emailInput, 'test@example.com');
await userEvent.type(passwordInput, 'password123');
expect(emailInput).toHaveValue('test@example.com');
expect(passwordInput).toHaveValue('password123');
+
+ expect(submitButton).toBeEnabled();
});
- it('로그인 버튼이 제출 가능한 상태여야 한다', () => {
+ it('유효하지 않은 이메일 형식을 입력하면 에러 메시지가 표시되어야 한다', async () => {
render();
- const submitButton = screen.getByRole('button', { name: '로그인' });
- expect(submitButton).toBeEnabled();
+ const emailInput = screen.getByLabelText('아이디');
+ await userEvent.type(emailInput, 'invalid-email');
+ await userEvent.tab();
+
+ await waitFor(() => {
+ expect(
+ screen.getByText('올바른 이메일 형식이 아닙니다.'),
+ ).toBeInTheDocument();
+ });
});
});