🎯 3.3 モック（mock）とスパイ（spy）の基本

✅ 【要点】

• モック（mock） → 実際の処理を**偽物（ダミー）**に置き換えること
• スパイ（spy） → 関数が何回呼ばれたか / どんな引数だったかを記録すること

💡 「本物の関数は動かさない。でも呼び出しだけチェックしたい」ときに使う。

🛠️ 【なぜ使う？】

• 外部APIを実際に呼びたくないとき
• Vuexの action を本当に動かしたくないとき
• ランダム値や日時など、毎回変わるものを固定したいとき

👉 テスト結果を安定させるため

👉 副作用を防ぐため（データ更新やAPI通信をさせない）

🟢 【Jestのモック関数の作り方】

// モック関数を作成
const mockFn = jest.fn();

// 呼び出し
mockFn('apple');
mockFn('banana');

// 呼び出された回数を確認
expect(mockFn).toHaveBeenCalledTimes(2);

// 最初の呼び出しの引数が 'apple' か？
expect(mockFn).toHaveBeenCalledWith('apple');

🔥 【スパイ（spy）の作り方】

// オブジェクトのメソッドをスパイ（監視）する
const calculator = {
  add: (a: number, b: number) => a + b,
};

// calculator.addを監視
const spy = jest.spyOn(calculator, 'add');

// 実際に呼び出す
calculator.add(1, 2);

// 呼び出されたか確認
expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith(1, 2);

// スパイを解除
spy.mockRestore();

💡 jest.spyOn → 元の関数はそのまま動くけど、呼び出し記録だけする。