단위 테스트 설정

npm install --save-dev jest @types/jest @testing-library/react @testing-library/dom @testing-library/jest-dom jest-environment-jsdom
# 또는
yarn add --dev jest @types/jest @testing-library/react @testing-library/dom @testing-library/jest-dom jest-environment-jsdom

const nextJest = require('next/jest');

// Next.js Jest 설정 유틸리티를 초기화합니다.
const createJestConfig = nextJest({
  // Next.js 애플리케이션의 루트 디렉토리를 제공합니다.
  dir: './',
});

// Jest에 추가적인 커스텀 설정을 추가할 수 있습니다.
const customJestConfig = {
  // 테스트 환경을 jsdom으로 설정하여 DOM 환경을 시뮬레이션합니다.
  testEnvironment: 'jsdom',
  // 테스트 파일의 패턴을 정의합니다. (e.g., .test.js, .spec.js)
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|js?|tsx?|ts?)$',
  // 모듈 해석 방식을 설정합니다.
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  // 테스트 전 전역적으로 실행될 setup 파일을 지정합니다.
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  // 특정 경로를 모듈로 인식하도록 합니다. Next.js의 path alias와 유사.
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  // 테스트 커버리지 보고서를 생성할지 여부를 설정합니다.
  collectCoverage: false,
  // 테스트 커버리지 보고서를 생성할 파일 패턴을 지정합니다.
  collectCoverageFrom: [
    'src/components/**/*.{js,jsx,ts,tsx}',
    'src/app/**/*.{js,jsx,ts,tsx}',
    '!/node_modules/',
    '!/vendor/',
  ],
};

// Next.js Jest 설정과 커스텀 설정을 병합하여 내보냅니다.
module.exports = createJestConfig(customJestConfig);

import '@testing-library/jest-dom';
// 여기서는 @testing-library/jest-dom의 확장된 매처를 임포트합니다.
// 예: toBeInTheDocument(), toHaveClass() 등을 사용할 수 있게 됩니다.

{
  "name": "your-nextjs-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint .",
    "test": "jest",
    "test:watch": "jest --watch"
  }
}

export function sum(a: number, b: number): number {
  return a + b;
}

export function capitalize(str: string): string {
  if (!str) return '';
  return str.charAt(0).toUpperCase() + str.slice(1);
}

import { sum, capitalize } from '../lib/utils'; // 테스트할 함수 임포트

describe('Utils 함수 테스트', () => {
  test('sum 함수는 두 숫자의 합을 반환해야 합니다.', () => {
    expect(sum(1, 2)).toBe(3);
    expect(sum(-1, 1)).toBe(0);
    expect(sum(0, 0)).toBe(0);
  });

  test('capitalize 함수는 문자열의 첫 글자를 대문자로 만들어야 합니다.', () => {
    expect(capitalize('hello')).toBe('Hello');
    expect(capitalize('world')).toBe('World');
    expect(capitalize('')).toBe('');
    expect(capitalize('a')).toBe('A');
  });
});

"use client"; // 클라이언트 컴포넌트

import React from 'react';

interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
}

export default function Button({ children, onClick, disabled = false }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      style={{
        padding: '10px 20px',
        backgroundColor: disabled ? '#ccc' : '#007bff',
        color: 'white',
        border: 'none',
        borderRadius: '5px',
        cursor: disabled ? 'not-allowed' : 'pointer',
      }}
    >
      {children}
    </button>
  );
}

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react'; // 필요한 유틸리티 임포트
import Button from '../components/Button'; // 테스트할 컴포넌트 임포트

describe('Button 컴포넌트', () => {
  test('버튼 텍스트가 올바르게 렌더링되어야 합니다.', () => {
    render(<Button>클릭하세요</Button>); // 컴포넌트 렌더링
    // screen.getByText를 사용하여 화면에 "클릭하세요" 텍스트가 있는지 확인
    expect(screen.getByText('클릭하세요')).toBeInTheDocument();
  });

  test('버튼 클릭 시 onClick 핸들러가 호출되어야 합니다.', () => {
    const handleClick = jest.fn(); // Jest의 Mock 함수 생성
    render(<Button onClick={handleClick}>Submit</Button>);

    // 화면에서 "Submit" 텍스트를 가진 버튼을 찾고 클릭 이벤트를 발생시킵니다.
    fireEvent.click(screen.getByText('Submit'));

    // handleClick Mock 함수가 호출되었는지 확인합니다.
    expect(handleClick).toHaveBeenCalledTimes(1); // 1번 호출되었는지
  });

  test('disabled prop이 true일 때 버튼이 비활성화되어야 합니다.', () => {
    render(<Button disabled>비활성화 버튼</Button>);

    // "비활성화 버튼" 텍스트를 가진 버튼이 disabled 상태인지 확인
    expect(screen.getByText('비활성화 버튼')).toBeDisabled();
  });

  test('disabled prop이 false일 때 버튼이 활성화되어야 합니다.', () => {
    render(<Button disabled={false}>활성화 버튼</Button>);

    // "활성화 버튼" 텍스트를 가진 버튼이 enabled 상태인지 확인
    expect(screen.getByText('활성화 버튼')).not.toBeDisabled();
  });
});

export async function fetchUserData(userId: string) {
  const res = await fetch(`http://localhost:4000/users/${userId}`);
  if (!res.ok) {
    throw new Error('사용자 데이터를 가져오지 못했습니다.');
  }
  return res.json();
}

/** @jest-environment node */

import { fetchUserData } from '../lib/api';

// fetch 함수를 Mocking
// Jest는 전역 fetch를 자동으로 Mocking 해주지는 않습니다.
// 파일 단위 node 환경에서 Node.js 20의 전역 fetch를 Mocking하는 예시입니다.
// 실제 Next.js 앱에서는 Jest 설정에서 'whatwg-fetch' 또는 'node-fetch'를 Mocking할 수 있습니다.
// 혹은 MSW (Mock Service Worker) 같은 라이브러리를 사용하는 것이 더 강력합니다.

describe('API 함수 테스트', () => {
  // 테스트 시작 전에 fetch를 Mocking합니다.
  beforeEach(() => {
    jest.spyOn(global, 'fetch').mockResolvedValue(
      {
        ok: true,
        json: () => Promise.resolve({ id: '123', name: 'Test User' }),
      } as Response,
    );
  });

  // 각 테스트 후 Mocking을 초기화합니다.
  afterEach(() => {
    jest.restoreAllMocks();
  });

  test('fetchUserData는 사용자 데이터를 성공적으로 가져와야 합니다.', async () => {
    const user = await fetchUserData('123');
    expect(user).toEqual({ id: '123', name: 'Test User' });
    expect(global.fetch).toHaveBeenCalledTimes(1);
    expect(global.fetch).toHaveBeenCalledWith('http://localhost:4000/users/123');
  });

  test('fetchUserData는 오류 발생 시 예외를 던져야 합니다.', async () => {
    // 오류 상황을 시뮬레이션하기 위해 fetch Mocking을 재정의
    jest.mocked(global.fetch).mockResolvedValueOnce(
      {
        ok: false,
        status: 404,
        json: () => Promise.resolve({ message: 'Not Found' }),
      } as Response,
    );

    await expect(fetchUserData('nonexistent')).rejects.toThrow('사용자 데이터를 가져오지 못했습니다.');
  });
});