前言：

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

使用 Jest 擴(kuò)展顯著改善測試流程

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

1.自動啟動 Jest 測試

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

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

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

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

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

允許調(diào)試單元測試

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

{
"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"
}
]
}

導(dǎo)航到測試文件并在代碼中要調(diào)試的任意位置設(shè)置斷點?？梢酝ㄟ^單擊行號左側(cè)的位置來設(shè)置圓點來設(shè)置斷點。

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

在文件中顯示代碼覆蓋率

VSCode Jest 擴(kuò)展提供了一個選項，可以通過命令面板切換代碼覆蓋率報告。 打開命令面板并查找Jest:Toggle Coverage命令。這將在代碼文件中切換幾項內(nèi)容，如下面的屏幕截圖所示?！裨谖募敳浚梢垣@得有關(guān)此文件覆蓋范圍的全局信息。 它顯示單元測試覆蓋的函數(shù)、語句和分支的百分比?！裎礈y試的行標(biāo)有紅色背景。 這有助于一目了然地找出代碼中未經(jīng)測試的路徑。●部分測試的代碼標(biāo)有黃色背景。 例如，下面的三元運算符僅在一種情況下進(jìn)行了測試，但從未到達(dá) else 子句。

結(jié)論

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

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

最新評論