快捷導(dǎo)航

使用Jest?在?Visual?Studio?Code?中進(jìn)行單元測(cè)試的流程分析

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

Jest是一個(gè)流行的JavaScript測(cè)試框架，它提供了簡(jiǎn)潔、靈活和強(qiáng)大的工具來(lái)編寫和運(yùn)行單元測(cè)試，今天通過(guò)本文給大家介紹使用Jest在Visual Studio Code中進(jìn)行單元測(cè)試的流程分析，感興趣的朋友跟隨小編一起看看吧

前言：

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

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

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

1.自動(dòng)啟動(dòng) Jest 測(cè)試

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

2. 顯示單個(gè)失敗/通過(guò)的測(cè)試用例

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

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

此外，失敗的測(cè)試也顯示在底部面板的問(wèn)題檢查器中。

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

我們可以輕松地為 Jest 測(cè)試設(shè)置調(diào)試。首先，在項(xiàng)目的根目錄中創(chuàng)建或打開(kāi).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)航到測(cè)試文件并在代碼中要調(diào)試的任意位置設(shè)置斷點(diǎn)?？梢酝ㄟ^(guò)單擊行號(hào)左側(cè)的位置來(lái)設(shè)置圓點(diǎn)來(lái)設(shè)置斷點(diǎn)。

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

在文件中顯示代碼覆蓋率

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

結(jié)論

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

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

您可能感興趣的文章: