Next.jsでfake timersを使う方法｜setTimeout・日付・非同期テストを高速化

import { render, screen, act } from '@testing-library/react';
import { AutoDismissAlert } from './AutoDismissAlert';

describe('AutoDismissAlert', () => {
  beforeEach(() => {
    // 1. 各テストケースの実行前に疑似タイマーを有効化（引数に 'modern' を指定）
    jest.useFakeTimers();
  });

  afterEach(() => {
    // 2. 他のテストへの影響を防ぐため、実時間に確実にリセットする
    jest.useRealTimers();
  });

  it('指定された5秒後にアラートメッセージが自動消去されること', () => {
    render(<AutoDismissAlert message="保存しました" duration={5000} />);
    
    // 初期表示を確認
    expect(screen.getByText('保存しました')).toBeInTheDocument();

    // ❌ 実際に5秒待つのではなく
    // ✅ 疑似クロック上で瞬時に 5000ms 先に進める
    act(() => {
      jest.advanceTimersByTime(5000);
    });

    // 待機後のDOM状態を確認
    expect(screen.queryByText('保存しました')).not.toBeInTheDocument();
  });
});

describe('CampaignBanner', () => {
  beforeEach(() => {
    jest.useFakeTimers();
  });

  afterEach(() => {
    jest.useRealTimers();
  });

  it('キャンペーン期間外（2026年1月2日）ではバナーが表示されないこと', () => {
    // 疑似システム現在時刻をキャンペーン前の日付に固定
    jest.setSystemTime(new Date('2026-01-02T10:00:00Z'));
    
    render(<CampaignBanner />);
    expect(screen.queryByText('新春セール開催中！')).not.toBeInTheDocument();
  });

  it('キャンペーン期間内（2026年1月3日）に入るとバナーが表示されること', () => {
    // 疑似システム現在時刻をキャンペーン期間中の日付に固定
    jest.setSystemTime(new Date('2026-01-03T12:00:00Z'));
    
    render(<CampaignBanner />);
    expect(screen.getByText('新春セール開催中！')).toBeInTheDocument();
  });
});

it('API通信を伴う遅延タイマー処理のテスト', async () => {
  jest.useFakeTimers();

  render(<AsyncDelayComponent />);

  // トリガーアクションを実行
  const button = screen.getByRole('button', { name: '実行' });
  button.click();

  // 1. タイマーを3秒進める
  act(() => {
    jest.advanceTimersByTime(3000);
  });

  // 2. 【最重要】保留中の Promise の解決を強制的に完了させるためのフラッシュ処理
  await act(async () => {
    await Promise.resolve(); // マイクロタスクの最下部に潜り込み、前のタスクをすべて押し出す
  });

  // 非同期API結果が画面に反映されていることを検証
  expect(await screen.findByText('非同期処理完了')).toBeInTheDocument();
});

import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
import { render, screen } from '@testing-library/react';

describe('VitestでのFake Timers', () => {
  beforeEach(() => {
    // Vitestでのタイマーモック化
    vi.useFakeTimers();
  });

  afterEach(() => {
    vi.useRealTimers();
  });

  it('Vitest特有の非同期アドバンス機能を利用する', async () => {
    // 疑似時間を固定
    vi.setSystemTime(new Date('2026-05-31'));

    render(<DelayedComponent />);

    // ✅ Vitestでは advanceTimersByTimeAsync を使うことで、
    // タイマーの進行と非同期Promiseキューのフラッシュを1アクションで安全に同時に行えます。
    await vi.advanceTimersByTimeAsync(2000);

    expect(screen.getByText('遅延読み込み完了')).toBeInTheDocument();
  });
});