在軟體開發的過程中，單元測試 和 整合測試 是確保程式碼質量的重要步驟。單元測試 專注於測試應用中的單一功能或模組，確保它們按預期工作。而 整合測試 則測試應用中不同模組之間的相互作用，確保它們能正確協作，模擬使用者實際操作應用的過程。

此文章將介紹如何使用 Vitest 來進行單元測試，以及如何使用 Playwright 進行整合測試，並結合 Electron 的官方測試流程來構建穩定可靠的應用。

單元測試（Unit Testing）—— 使用 Vitest

單元測試 是對應用中的小範圍功能進行測試。對於 Electron 應用，我們可以使用 Vitest 來實現這樣的單元測試。

Vitest 簡介

Vitest 是一個輕量且快速的單元測試框架，與 Vite 深度整合。它具有快速的重建功能，讓你可以更快地進行測試，並支援現代化的測試功能如快照、異步測試等。這對於 Electron 應用中的資料處理邏輯、API 調用邏輯進行單元測試非常實用。

安裝 Vitest

首先，我們需要將 Vitest 安裝到專案中。

npm install vitest --save-dev

撰寫 Vitest 測試範例

在撰寫測試時，將測試檔案放置於 tests 資料夾下或靠近你想測試的模組。這裡以簡單的數學運算功能為例進行測試。

建立測試檔案 math.test.js：

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

// 一個簡單的加法函數
function add(a, b) {
  return a + b;
}

describe('加法測試', () => {
  it('應該正確地將兩個數字相加', () => {
    expect(add(2, 3)).toBe(5);
    expect(add(-1, 1)).toBe(0);
  });
});

執行測試

Vitest 可以快速執行測試並顯示測試結果。你可以在 package.json 中定義測試腳本來執行 Vitest：

{
  "scripts": {
    "test": "vitest"
  }
}

接下來，運行測試：

npm run test

這樣，Vitest 會自動掃描專案中的測試檔案，並執行測試，結果會顯示在終端上。

Electron 單元測試說明

官方文件中提到，如果你沒有使用建構工具，請確保你已為本地構建的 Electron 設定了 process.env.ELECTRON_OUT_DIR 或正確的編譯目標名稱（如 Testing、Release）。否則，Electron 會無法執行某些預測試步驟。

要運行所有單元測試，你可以執行：

npm run test

這將運行所有放置在 spec 資料夾中的單元測試應用。你還可以通過模式匹配運行特定的測試，例如只運行 IPC 測試：

npm run test -- -g=ipc

整合測試（Integration Testing）—— 使用 Playwright

整合測試 是測試應用中多個功能模組的相互作用，確保這些模組能夠正確協同工作。在 Electron 應用中，這意味著需要測試應用從前端到後端的完整工作流程，模擬使用者實際操作的過程。

Playwright 簡介

Playwright 是一個功能強大的端到端測試框架，由 Microsoft 開發，專為跨瀏覽器的測試而設計。它支援多個瀏覽器內核（Chromium、Firefox、WebKit）並且可以在無頭瀏覽器模式下運行。Playwright 還支援 Electron，允許你對 Electron 應用進行端到端的整合測試，模擬使用者行為。

安裝 Playwright

安裝 Playwright 並設置 Electron 支援：

npm install playwright --save-dev

你還需要安裝 Electron 的 DevTools Protocol 來與 Playwright 整合：

npm install electron-devtools-installer --save-dev

撰寫 Playwright 測試

建立一個 Playwright 測試範例，來模擬一個簡單的用戶交互流程，例如打開應用並檢查視窗標題。

const { _electron: electron } = require('playwright');
const { expect } = require('@playwright/test');

describe('Electron 應用整合測試', () => {
  let electronApp;

  beforeAll(async () => {
    // 啟動 Electron 應用
    electronApp = await electron.launch({ args: ['.'] });
  });

  afterAll(async () => {
    // 停止應用
    await electronApp.close();
  });

  it('應用視窗應顯示正確的標題', async () => {
    const window = await electronApp.firstWindow();
    const title = await window.title();
    expect(title).toBe('Electron 應用');
  });
});

執行 Playwright 測試

要運行 Playwright 測試，可以在 package.json 中定義 Playwright 測試腳本：

{
  "scripts": {
    "test:e2e": "playwright test"
  }
}

然後執行測試：

npm run test:e2e

Playwright 將啟動 Electron 應用，並按照定義的測試腳本執行模擬操作和檢查結果。

使用 Playwright 進行 Electron 應用的整合測試

Playwright 支援通過 Chrome DevTools Protocol (CDP) 與 Electron 應用交互，這允許 Playwright 模擬整個應用的運行流程。例如，模擬使用者點擊按鈕、輸入文字、導航到不同頁面等。Playwright 甚至支援 Electron 的實驗性功能來進行更多定製化的整合測試。

總結

在 Electron 應用的開發過程中，單元測試 和 整合測試 是保證應用質量的關鍵步驟。使用 Vitest 進行單元測試，可以確保應用中的各個模組和函數按預期工作。而通過 Playwright 進行整合測試，能夠模擬真實使用者的操作，確保應用的多模組協同工作正確無誤。

兩者結合，為你的應用提供了強大的測試保障，使你能夠更快、更高效地找到並修復問題，最終交付高質量的產品。