與其他測試執行器的比較
Jest
Jest 透過為大多數 JavaScript 專案提供開箱即用的支援、易用的 API(it
和 expect
)以及多數設定所需的完整測試功能(快照、模擬、覆蓋率),在測試框架領域中佔據了主導地位。 我們感謝 Jest 團隊和社群創建了一個令人愉悅的測試 API,並推動了許多現在已成為網頁生態系統標準的測試模式。
您可以在 Vite 的配置中使用 Jest。 @sodatea 建立了 vite-jest,旨在為 Jest 提供一流的 Vite 整合。 最後的 Jest 障礙 已經排除,因此這是單元測試的有效選擇。
然而,在 Vite 為最常見的 Web 工具(TypeScript、JSX、最流行的 UI 框架)提供支援的世界中,使用 Jest 意味著重複的複雜性。 如果您的應用程式由 Vite 驅動,則擁有兩套不同的流程來配置和維護是不合理的。 透過 Vitest,您可以將開發、構建和測試環境的配置定義為單一流程,共用相同的外掛程式和相同的 vite.config.js。
即使您的程式庫未使用 Vite(例如,如果它是使用 esbuild 或 rollup 構建的),Vitest 也是一個值得考慮的選擇,因為它可以讓您的單元測試執行得更快,並且由於預設的監視模式使用 Vite 即時熱模組重載(HMR),因此可提升開發者體驗(DX)。 Vitest 提供與大多數 Jest API 和生態系統函式庫的相容性,因此在大多數專案中,它應該可以作為 Jest 的直接替代方案。
Cypress
Cypress 是一個基於瀏覽器的測試執行器,也是 Vitest 的補充工具。 如果您想使用 Cypress,我們建議您將 Vitest 用於應用程式中的所有無頭邏輯,而將 Cypress 用於所有基於瀏覽器的邏輯。
Cypress 是一款端對端測試工具,但他們 新的元件測試執行器 對測試 Vite 元件有很好的支援,並且是測試在瀏覽器中呈現的任何內容的理想選擇。
基於瀏覽器的測試執行器(如 Cypress、WebdriverIO 和 Web Test Runner)能夠捕捉 Vitest 無法檢測到的問題,因為它們使用真正的瀏覽器和真正的瀏覽器 API。
Cypress 的測試驅動器專注於判斷元素是否可見、可訪問和可交互。 Cypress 專為 UI 開發和測試而設計,其 DX 以測試驅動您的視覺化元件為核心。 您會看到您的元件與測試報告工具一同呈現。 測試完成後,元件保持互動,您可以使用瀏覽器開發人員工具除錯發生的任何故障。
相對而言,Vitest 專注於為快速的無頭測試提供最佳的開發者體驗(DX)。 基於 Node 的執行器(如 Vitest)支援各種部分實現的瀏覽器環境,如 jsdom
,它們實現了足夠的功能,讓您可以快速單元測試任何引用瀏覽器 API 的程式碼。 這意味著這些瀏覽器環境在實現功能方面存在一些限制。 例如,jsdom 缺少許多功能,如 window.navigation
或版面配置引擎(offsetTop
等)。
最後,與 Web Test Runner 相比,Cypress 測試執行器更像是一個 IDE,而不是一個單純的測試執行器,因為您還可以在瀏覽器中看到真實呈現的元件,以及其測試結果和日誌。
Cypress 也持續 將 Vite 整合到他們的產品中:使用 Vitesse 重新構建他們的應用程式 UI,並使用 Vite 來測試驅動他們專案的開發。
我們認為 Cypress 不是單元測試無頭程式碼的最佳選擇,但使用 Cypress(用於 E2E 和元件測試)和 Vitest(用於單元測試)將涵蓋您應用程式的測試需求。
WebdriverIO
WebdriverIO 與 Cypress 類似,是一個基於瀏覽器的替代測試執行器,也是 Vitest 的補充工具。 它可以作為端對端測試工具以及用於測試 Web 元件。 它甚至在底層使用 Vitest 的元件,例如,用於元件測試中的 模擬和存根。
WebdriverIO 具備與 Cypress 相同的優勢,允許您在真實瀏覽器中測試邏輯。 但是,它使用實際的 Web 標準 進行自動化,這克服了在 Cypress 中測試時的一些缺陷和限制。 此外,它還允許您在行動裝置上執行測試,讓您得以在更多環境中測試您的應用程式。
Web Test Runner
@web/test-runner 在無頭瀏覽器中執行測試,提供與您的 Web 應用程式相同的執行環境,而無需模擬瀏覽器 API 或 DOM。 這也使得可以在真實瀏覽器中使用開發人員工具進行除錯,儘管沒有像 Cypress 測試那樣,顯示用於逐步執行測試步驟的 UI。 有一個監視模式,但不如 Vitest 來的智慧,而且可能不一定會重新執行您想執行的測試。 要將 @web/test-runner 與 Vite 專案一起使用,請使用 @remcovaes/web-test-runner-vite-plugin。 @web/test-runner 不包含斷言或模擬函式庫,因此需要您自行新增。
uvu
uvu 是一個用於 Node.js 和瀏覽器的測試執行器。 它在單一執行緒裡執行測試,因此測試不會隔離,可能會跨文件泄漏。 然而,Vitest 使用工作線程來隔離測試並平行執行它們。 為了轉換您的程式碼,uvu 依賴於 require 和載入器鉤子。 Vitest 使用 Vite,因此檔案會使用 Vite 外掛程式系統的全部功能進行轉換。 在一個 Vite 支持最常見的 Web 工具(如 TypeScript、JSX 和流行的 UI 框架)的環境中,使用 uvu 意味著重複的複雜性。 如果您的應用程式由 Vite 驅動,則擁有兩套不同的流程來配置和維護是不合理的。 透過 Vitest,您可以將開發、構建和測試環境的配置定義為單一流程,共用相同的外掛程式和相同的 vite.config.js。 uvu 不提供智慧監視模式來重新執行已變更的測試,而 Vitest 透過預設的監視模式,利用 Vite 即時熱模組重載(HMR)為您提供絕佳的 DX(開發者體驗)。 uvu 是執行簡單測試的快速選擇,但對於更複雜的測試和專案,Vitest 可以更快且更可靠。