[일지] 2026.01.10

김재만·2026년 1월 10일

작업한 것

연습

로그인 기능 재구현

테스트 추가

구현 계획 - 회원가입 흐름 테스트 구축
이 계획은 260110 프로젝트의 신뢰성을 보장하기 위해 백엔드와 프론트엔드에 테스트 환경을 설정하고 테스트 코드를 작성하는 방법을 설명합니다.

제안된 변경 사항
[백엔드]
Jest와 Supertest를 사용하여 API 테스트를 설정하고 작성합니다.

[수정] 
package.json
devDependencies에 jest와 supertest 추가
test 스크립트 추가
[신규] 
auth.test.js
POST /auth/register 엔드포인트 테스트
유저 데이터가 DB에 올바르게 저장되는지 검증
[프론트엔드]
React Testing Library를 사용하여 컴포넌트 테스트를 설정하고 작성합니다.

[수정] 
package.json
@testing-library/react, @testing-library/jest-dom, jest 설정 확인 (CRA로 생성된 경우 기본 포함)
[신규] 
App.test.js
Axios 모킹(Mocking) 처리
폼 제출 및 성공 핸들링 테스트
검증 계획
자동화 테스트
백엔드 및 프론트엔드 디렉토리에서 각각 npm test 또는 yarn test 실행
모든 테스트 케이스가 통과하는지 확인

Frontend 테스트 추가

JEST 목 서버 생성
페이지 렌더링
테스트 데이터 입력
Submit

API 테스트

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import App from './App';
import { axios } from './libs/axios';

// Mock axios instance
jest.mock('./libs/axios', () => ({
  axios: {
    post: jest.fn()
  }
}));

test('renders registration form and submits successfully', async () => {
  // Mock API response
  axios.post.mockResolvedValue({ data: { message: 'User registered successfully' } });

  render(<App />);

  // Find form elements
  const emailInput = screen.getByPlaceholderText(/EMAIL/i);
  const passwordInput = screen.getByPlaceholderText(/PASSWORD/i);
  const nameInput = screen.getByPlaceholderText(/NAME/i);
  const submitButton = screen.getByRole('button', { name: /Submit/i });

  // Type in the form
  await userEvent.type(emailInput, 'test@example.com');
  await userEvent.type(passwordInput, 'password123');
  await userEvent.type(nameInput, 'Test User');

  // Submit the form
  fireEvent.click(submitButton);

  // Verify API was called with correct data
  await waitFor(() => {
    expect(axios.post).toHaveBeenCalledWith('/auth/register', {
      email: 'test@example.com',
      password: 'password123',
      name: 'Test User'
    });
  });
});

Backend 테스트 추가

BEFORE: users table 생성여부 확인
TESTING: registerUser API 호출하여 테스트 유저 생성

AFTER: 테스트 유저 삭제

// auth.test.js

import request from "supertest";
import { app } from "../server.js";
import { db } from "../db/sqlite.js";

describe("Auth API", () => {
    beforeAll(() => {
        // Ensure table exists for tests
        db.exec(`
      CREATE TABLE IF NOT EXISTS users (
          id INTEGER PRIMARY KEY AUTOINCREMENT,
          email TEXT NOT NULL,
          password TEXT NOT NULL,
          name TEXT,
          create_at TEXT DEFAULT (datetime('now', 'local')),
          update_at TEXT DEFAULT (datetime('now', 'local'))
      )
    `);
    });

    afterAll(() => {
        // Optionally clean up test data
        db.prepare("DELETE FROM users WHERE email = ?").run("test@example.com");
    });

    it("should register a new user", async () => {
        const res = await request(app)
            .post("/auth/register")
            .send({
                email: "test@example.com",
                password: "password123",
                name: "Test User"
            });

        expect(res.status).toBe(201);
        expect(res.body).toHaveProperty("message", "User registered successfully");
        expect(res.body.user).toHaveProperty("email", "test@example.com");
        expect(res.body.user).toHaveProperty("id");
    });
});