前言：

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

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

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

1.自動啟動 Jest 測試

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

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

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

Jest 擴展在測試失敗的地方添加了一個內聯(lián)紅色下劃線，并顯示詳細的錯誤消息。 此外，可以在左側看到所有測試的狀態(tài)。VSCode Jest 擴展在測試通過/失敗的測試文件中提供了一個可視化界面。 此外，可以通過單擊綠色/紅色圖標重新運行測試。Visual Studio 邊欄有一個測試面板，現(xiàn)在將顯示所有的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命令。這將在代碼文件中切換幾項內容，如下面的屏幕截圖所示?！裨谖募敳?，可以獲得有關此文件覆蓋范圍的全局信息。 它顯示單元測試覆蓋的函數(shù)、語句和分支的百分比?！裎礈y試的行標有紅色背景。 這有助于一目了然地找出代碼中未經(jīng)測試的路徑。●部分測試的代碼標有黃色背景。 例如，下面的三元運算符僅在一種情況下進行了測試，但從未到達 else 子句。

結論

如果你像我一樣只使用過 CLI 界面進行單元測試，我強烈建議你嘗試一下編輯器工具。 在我親身體驗之前，我不知道我到底有多需要它。

到此這篇關于使用 Jest 在 Visual Studio Code 中進行更好的單元測試的文章就介紹到這了,更多相關Jest  Visual Studio Code單元測試內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論