Vitest

英文

简体中文

英文

简体中文

外觀

瀏覽器模式 實驗性質 ​

此頁面提供有關 Vitest API 中的實驗性瀏覽器模式功能的資訊，此功能可讓您在瀏覽器中本機執行測試，並存取瀏覽器全域變數，例如 window 和 document。此功能目前仍在開發中，且 API 可能在未來有所變更。

瀏覽器相容性 ​

Vitest 使用 Vite dev 伺服器 來執行您的測試，因此我們僅支援 esbuild.target 選項中指定的特色（預設為 esnext）。

預設情況下，Vite 鎖定支援原生 ES 模組、原生 ESM 動態匯入 和 import.meta 的瀏覽器。除此之外，我們使用 BroadcastChannel 在 iframe 之間進行通訊

  • Chrome >=87
  • Firefox >=78
  • Safari >=15.4
  • Edge >=88

動機 ​

我們開發 Vitest 瀏覽器模式功能，以協助改善測試工作流程，並獲得更準確且可靠的測試結果。這個實驗性的測試 API 新增功能，讓開發人員可以在原生瀏覽器環境中執行測試。在此區段，我們將探討此功能背後的動機及其對測試的效益。

不同的測試方式 ​

有不同的方式可以測試 JavaScript 程式碼。有些測試架構在 Node.js 模擬瀏覽器環境，而其他則在真實瀏覽器中執行測試。在此背景下，jsdom 是模擬瀏覽器環境的規格實作範例，可與 Jest 或 Vitest 等測試執行器搭配使用，而其他測試工具（例如 WebdriverIO 或 Cypress）則讓開發人員可以在真實瀏覽器中測試其應用程式，或在 Playwright 的情況下，提供瀏覽器引擎。

模擬警示 ​

在模擬環境（例如 jsdom 或 happy-dom）中測試 JavaScript 程式，簡化了測試設定並提供了易於使用的 API，使其適用於許多專案，並提高對測試結果的信心。然而，必須牢記，這些工具僅模擬瀏覽器環境，而非實際瀏覽器，這可能會導致模擬環境與真實環境之間出現一些差異。因此，測試結果中可能會出現假陽性或假陰性。

為了在我們的測試中達到最高等級的信心，在真實的瀏覽器環境中進行測試至關重要。這就是我們在 Vitest 中開發瀏覽器模式功能的原因，它允許開發人員在瀏覽器中原生執行測試，並獲得更準確和可靠的測試結果。透過瀏覽器層級的測試，開發人員可以更有信心地確信他們的應用程式在真實世界的場景中會按預期運作。

缺點 ​

在使用 Vitest 瀏覽器時，請務必考量以下缺點

早期開發 ​

Vitest 的瀏覽器模式功能仍處於早期開發階段。因此，它可能尚未完全最佳化，並且可能有一些尚未解決的錯誤或問題。建議使用者搭配獨立的瀏覽器端測試執行器（例如 WebdriverIO、Cypress 或 Playwright）來增強他們的 Vitest 瀏覽器體驗。

較長的初始化 ​

Vitest 瀏覽器需要在初始化程序中啟動提供者和瀏覽器，這可能會花費一些時間。這可能會導致與其他測試模式相比，初始化時間較長。

組態 ​

若要在 Vitest 組態中啟用瀏覽器模式，你可以使用 --browser 旗標或在 Vitest 組態檔案中將 browser.enabled 欄位設定為 true。以下是使用瀏覽器欄位的組態範例

ts
export default defineConfig({
  test: {
    browser: {
      enabled: true,
      name: 'chrome', // browser name is required
    },
  }
})

瀏覽器選項類型 ​

Vitest 中的瀏覽器選項取決於提供者。如果你傳遞 --browser 但未在組態檔案中指定其名稱，Vitest 會失敗。可用選項

  • webdriverio（預設）支援這些瀏覽器
    • firefox
    • chrome
    • edge
    • safari
  • playwright 支援這些瀏覽器
    • firefox
    • webkit
    • chromium

跨瀏覽器測試 ​

當你在瀏覽器選項中指定瀏覽器名稱時，Vitest 會嘗試預設使用 WebdriverIO 執行指定的瀏覽器，然後在那裡執行測試。此功能使跨瀏覽器測試易於在 CI 等環境中使用和組態。如果你不想使用 WebdriverIO，你可以使用 browser.provider 選項來組態自訂瀏覽器提供者。

若要使用 CLI 指定瀏覽器，請使用 --browser 旗標，後接瀏覽器名稱，如下所示

sh
npx vitest --browser=chrome

或者，你可以使用點號表示法將瀏覽器選項提供給 CLI

sh
npx vitest --browser.name=chrome --browser.headless

注意

在 WebdriverIO 中使用 Safari 瀏覽器選項時，需要在你的裝置上執行 sudo safaridriver --enable 來啟用 safaridriver。

此外，在執行測試時，Vitest 會嘗試安裝一些驅動程式以與 safaridriver 相容。

無頭 ​

無頭模式是瀏覽器模式中的另一個可用選項。在無頭模式中，瀏覽器在背景中執行，沒有使用者介面，這使得它對於執行自動化測試很有用。Vitest 中的無頭選項可以設定為布林值以啟用或停用無頭模式。

以下是啟用無頭模式的範例設定

ts
export default defineConfig({
  test: {
    browser: {
      enabled: true,
      headless: true,
    },
  }
})

您也可以使用 CLI 中的 --browser.headless 旗標設定無頭模式，如下所示

sh
npx vitest --browser.name=chrome --browser.headless

在這種情況下，Vitest 將使用 Chrome 瀏覽器以無頭模式執行。

限制 ​

執行緒封鎖對話框 ​

在使用 Vitest 瀏覽器時，重要的是要注意像 alert 或 confirm 這樣的執行緒封鎖對話框不能原生使用。這是因為它們會封鎖網頁，這表示 Vitest 無法繼續與網頁通訊，導致執行掛起。

在這種情況下，Vitest 為這些 API 提供預設的模擬值。這可確保如果使用者意外使用同步彈出式網頁 API，執行將不會掛起。然而，仍建議使用者模擬這些網頁 API 以獲得更好的體驗。在 模擬 中閱讀更多資訊。