使用Jest?在?Visual?Studio?Code?中進行單元測試的流程分析

更新時間：2023年07月11日 10:47:24 作者：自由家

Jest是一個流行的JavaScript測試框架，它提供了簡潔、靈活和強大的工具來編寫和運行單元測試，今天通過本文給大家介紹使用Jest在Visual Studio Code中進行單元測試的流程分析，感興趣的朋友跟隨小編一起看看吧

前言：

Jest是一個流行的JavaScript測試框架，它提供了簡潔、靈活和強大的工具來編寫和運行單元測試。在Visual Studio Code（VS Code）中使用Jest可以進一步提升單元測試的效率和體驗。

使用 Jest 擴展顯著改善測試流程

我用 Jest 編寫單元測試已經有 5-6 年了。它總是能夠為類、方法和組件編寫適當的單元測試。在我的所有項目中，總是通過命令行運行 Jest。我在初始化項目時設置了一個簡單的 npm test或 yarn test命令，并在需要手動測試時使用它。此外，每當創(chuàng)建新的拉取/合并請求時，測試都會在 CI/CD 流水線中運行。然而，最近我發(fā)現了 VSCode Jest Extension。此擴展提供了比命令行更好的工作流程。讓我們來看看幾個功能。

1.自動啟動 Jest 測試

如果 Jest 安裝在項目的根文件夾中，那么此插件將開箱即用，并將開始監(jiān)視更改以運行相關測試。如果沒有在根目錄中安裝 Jest，可以通過工作區(qū)中的 VSCode 設置或全局 VSCode 設置輕松設置自定義命令。例如：“jest.jestCommandLine”: “yarn test”

2. 顯示單個失敗/通過的測試用例

VSCode Jest 擴展在測試通過/失敗的測試文件中提供了一個可視化界面。此外，可以通過單擊綠色/紅色圖標重新運行測試。

Jest 擴展在測試失敗的地方添加了一個內聯紅色下劃線，并顯示詳細的錯誤消息。此外，可以在左側看到所有測試的狀態(tài)。VSCode Jest 擴展在測試通過/失敗的測試文件中提供了一個可視化界面。此外，可以通過單擊綠色/紅色圖標重新運行測試。Visual Studio 邊欄有一個測試面板，現在將顯示所有的jtest測試用例及其狀態(tài)。這提供了快速概覽和在測試之間導航的簡便方法。

此外，失敗的測試也顯示在底部面板的問題檢查器中。

允許調試單元測試

我們可以輕松地為 Jest 測試設置調試。首先，在項目的根目錄中創(chuàng)建或打開.vscode/launch.json。應將以下配置添加到文件中。

{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest single run all tests",
"program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
"args": [
"-c",
"./jest.config.ts",
"--verbose",
"-i",
"--no-cache"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}

導航到測試文件并在代碼中要調試的任意位置設置斷點。可以通過單擊行號左側的位置來設置圓點來設置斷點。

第 13 行的斷點示例在“ Run and Debug”面板中，可以按播放按鈕開始調試。這將顯示大量信息：Local variables——所有局部變量將與它們的值一起顯示在面板的左上部分?？梢允褂谜{試器功能在測試行上移動，甚至移動到您正在測試的方法中，以找出測試未通過的原因。Closure ——在閉包中可訪問的所有變量。Global——所有全局可訪問的變量。

在文件中顯示代碼覆蓋率

VSCode Jest 擴展提供了一個選項，可以通過命令面板切換代碼覆蓋率報告。打開命令面板并查找Jest:Toggle Coverage命令。這將在代碼文件中切換幾項內容，如下面的屏幕截圖所示。●在文件頂部，可以獲得有關此文件覆蓋范圍的全局信息。它顯示單元測試覆蓋的函數、語句和分支的百分比?！裎礈y試的行標有紅色背景。這有助于一目了然地找出代碼中未經測試的路徑。●部分測試的代碼標有黃色背景。例如，下面的三元運算符僅在一種情況下進行了測試，但從未到達 else 子句。