React Jest 自動テストコツ

カバレッジ100%にしろよ教に立ち向かうためのメモ
API部の関数テスト

import * as apiHandler from '../components/Presets/api'

describe('update', () => {
	test('updatePreset', async () => {
	  // １、関数の引数
		const name = 'プリセット001'
		// 　　　　正常系モック(成功パターンを擬似的に表現できる)
		const mockedResponse: AxiosResponse | any = {
			data: {},
			status: 200,
			statusText: 'OK',
			headers: { 'content-type': 'application/json' },
      config: {},
      request: {}
		}
		jest.spyOn(axios, 'put').mockResolvedValueOnce(mockedResponse);
		jest.spyOn(apiHandler, 'fetchToken').mockResolvedValue(token);
		const mockPutPreset = jest.spyOn(apiHandler, 'putPreset').mockResolvedValueOnce(mockedResponse)
		const setLoading = jest.fn()
		
		// ２、テストしたい関数
		await apiHandler.updatePreset(name, setLoading)
		
		// ３、テストしたい内容
		waitFor(() => {
		  expect(mockPutPreset).toHaveBeenCalled()
		  expect(setLoading).toHaveBeenCalled()
		})
	})
})

【ポイント】

• jotaiライブラリーからできたsetLoadingでもどんな関数でもモック化して、引数に与えてあげればOK

• jest.spyOnでモジュール読み込みし、mockResolvedValueOnceやmockResolvedValueで成功時の値を指定すると擬似的に成功した状態で返してくれる

• ↑注意：ネスト深い他の非同期関数がある場合は、そいつも擬似的に成功するように用意しないといけない。今回の場合は以下の2行を指す。

• ちなみにwaitForは、何でもかんでもpassする可能性があるので、期待値と期待値以外を確かめて信ぴょう性の確認しましょう。

jest.spyOn(axios, 'put').mockResolvedValueOnce(mockedResponse);
jest.spyOn(apiHandler, 'fetchToken').mockResolvedValue(token);

---

chatGPT参考

jest.spyOnとjest.mock使い道

jest.spyOn を使用しても getPreset 関数の呼び出しを監視（スパイ）し、その動作をテスト中に検証することができます。spyOn は、元の関数の実装を保持しながらその呼び出しを追跡したり、特定の戻り値を返すように上書きしたりすることが可能です。これは、関数がどのように、そしてどこで呼び出されているかを知りたい場合に特に便利です。

getPreset をスパイする方法

以下のステップで、getPreset 関数のスパイを設定し、そのテストを実行する方法を説明します。

ステップ 1: getPreset のインポート

まず、テストしたい関数 getPreset をインポートします。これは通常、API呼び出しを行う外部のモジュールからのインポートになります。

javascriptCopy code
// api.js モジュールから getPreset 関数をインポート
import { getPreset } from './api';

ステップ 2: spyOn で関数をスパイ

jest.spyOn を使って getPreset 関数をスパイします。そして、mockResolvedValue を使ってスパイされた関数が特定の値を返すように設定します。

javascriptCopy code
describe('loadPreset', () => {
  it('loads preset data and sets states correctly', async () => {
    // getPreset 関数をスパイし、プロミスが解決された値をモックします
    jest.spyOn(api, 'getPreset').mockResolvedValue({
      name: 'Test Name',
      description: 'Test Description',
      system: 'Test System',
      user: 'Test User'
    });

    // その他のモック関数
    const setLoading = jest.fn();
    const setName = jest.fn();
    const setDescription = jest.fn();
    const setSystem = jest.fn();
    const setUser = jest.fn();

    // 関数を呼び出し
    await loadPreset('123', 'token', setLoading, setName, setDescription, setSystem, setUser);

    // getPreset が適切な引数で呼び出されたことを確認
    expect(api.getPreset).toHaveBeenCalledWith('123', 'token');
    // その他の期待
  });
});

ステップ 3: テスト後のクリーンアップ

afterEach や afterAll フックを使用して、テスト後にモックやスパイをリセットすることが重要です。これにより、他のテストに影響を与えることなく、テスト間の依存性を排除できます。

javascriptCopy code
afterEach(() => {
  jest.restoreAllMocks(); // すべてのモック/スパイをリセット
});

注意点

• スパイを使用すると、元の関数の呼び出しを"覗き見"することができますが、必要に応じてその振る舞いを変更することもできます。

• jest.spyOn は、モック化と異なり、元の関数の挙動を保持するオプションも提供します。これは、関数の元の実装を維持しながら、その呼び出しや返された値を検証したい場合に役立ちます。

この方法を使えば、getPreset 関数の呼び出しやそのパラメータ、戻り値を効果的にテストできるようになります。