VitestのspyOnで作成したMockの解除方法

1. spyOnでモックを作成する: 特定の関数をモックするためにspyOnを使います。
2. テストを実行する: モックを用いたテストを実行します。
3. モックを解除する: テスト終了後にmockRestoreを呼び出すことで、元の関数の挙動に戻します。

import { describe, it, expect, vi } from 'vitest';

const example = {
  method: () => 'original implementation',
};

describe('example.method', () => {
  it('should be mocked', () => {
    const spy = vi.spyOn(example, 'method').mockImplementation(() => 'mocked implementation');

    expect(example.method()).toBe('mocked implementation'); // モックされた実装を確認

    // モックを解除
    spy.mockRestore();
  });

  it('should return original implementation after restore', () => {
    expect(example.method()).toBe('original implementation'); // 元の実装を確認
  });
});

import { describe, it, expect, vi } from 'vitest';

describe('fetch API mock example', () => {
  it('should mock global fetch', async () => {
    // fetchをスパイし、モックした実装を提供
    const mockResponse = { data: 'mocked data' };
    const fetchSpy = vi.spyOn(global, 'fetch').mockResolvedValue({
      json: async () => mockResponse,
    });

    // fetchを呼び出す関数
    const fetchData = async () => {
      const response = await fetch('https://example.com/data');
      return response.json();
    };

    // fetchData関数を実行して、モックされたfetchのレスポンスを確認
    const data = await fetchData();
    expect(data).toEqual(mockResponse); // モックされたデータが返されることを確認

    // モックを解除
    fetchSpy.mockRestore();
  });

  it('should use the original fetch after restore', async () => {
    // 通常のfetchを呼び出す別のテストを実行
    const response = await fetch('https://api.github.com'); // 実際のAPIを呼び出し
    const data = await response.json();

    expect(data).toBeDefined(); // データが取得できることを確認
  });
});

説明:

1. スパイの作成: vi.spyOn(global, 'fetch')を使用して、global.fetchをモックします。

2. モックの実装: mockResolvedValueを使って、fetchが呼び出された時に特定のレスポンスを返すように設定します。

3. 関数の実行: fetchData関数を定義し、モックされたfetchを呼び出します。

4. 期待値の確認: レスポンスがモックされたデータと一致することを確認します。

5. モックの解除: mockRestoreを使って、fetchを元の実装に戻します。

6. 元のfetchのテスト: 別のテストケースで、元のfetch関数が正常に動作するかを確認します。