整合測試（Integration Test）與單元測試的區別如其字面上意思。整合測試是針對多個單元測試之間的交互進行測試。通常也使用 Jest、Mocha.js 等框架執行，並且也會搭配測試替身進行。因為這邊討論的是前端的整合測試，所以通常不涉及應用程式後端的資料處理。比較著重在 components 間，不同功能的測試。

舉個例子而言，今天寫了一個抽籤系統，每天早上十點會抽出中午午餐要吃什麼，並會於中午十二點播放鬧鐘鈴聲。我可以寫一個 lunchlottery.js 檔案。

// 午餐菜單
const lunchMenu = ['chicken', 'beef', 'pork', 'fish', 'vegetable'];

// 隨機選擇午餐
function chooseLunch() {
const randomIndex = Math.floor(Math.random() * lunchMenu.length);
return lunchMenu[randomIndex];
}

// 播放鬧鐘鈴聲
function playAlarm() {
console.log('是時候吃午餐囉！');
}

// 定義每天早上十點的時間
const lunchTime = new Date();
lunchTime.setHours(10, 0, 0, 0);

// 設定定時器，每天早上十點抽籤
const intervalId = setInterval(() => {
const currentTime = new Date();
if (currentTime >= lunchTime) {
  clearInterval(intervalId); // 停止定時器
  const selectedLunch = chooseLunch();
  console.log(`今天的午餐是：${selectedLunch}`);
}
}, 1000); // 每秒檢查一次

// 模擬中午十二點播放鬧鐘鈴聲
setTimeout(playAlarm, 2 * 60 * 60 * 1000); // 兩小時後播放鬧鐘鈴聲

我們可以針對上述的程式碼，進行幾個整合測試
1.系統有從菜單中隨機選擇出一個午餐
2.系統有在 12 點鐘播放鬧鈴

可新增一個測試檔案 lunchlottery.test.js

const { chooseLunch, playAlarm } = require('./lunchlottery');

// jest 的 useFakeTimers 搭配 advanceTimerByTime 可模擬時間快進
jest.useFakeTimers();

test('系統有從菜單中隨機選擇出一個午餐', () => {
  jest.advanceTimersByTime(10 * 60 * 1000);

  // 以 spy 方式模擬 console.log
  console.log = jest.fn();
  require('./lunchDrawer');
  expect(console.log).toHaveBeenCalledWith(expect.stringMatching(/^今天的午餐是：(chicken|beef|pork|fish|vegetable)$/));
});

test('系統有在 12 點鐘播放鬧鈴', () => {
  jest.advanceTimersByTime(2 * 60 * 60 * 1000);

  // 以 spy 方式模擬 console.log
  console.log = jest.fn();
  require('./lunchDrawer');
  expect(console.log).toHaveBeenCalledWith('叮咚叮咚～吃午餐時間到囉！！！');
});

上述例子即可驗證不同函式之間的互相交互，有沒有產生預期的結果，此即為整合測試。