目錄
前言：
使用 Jest 擴(kuò)展顯著改善測(cè)試流程
1.自動(dòng)啟動(dòng) Jest 測(cè)試
2. 顯示單個(gè)失敗/通過(guò)的測(cè)試用例
允許調(diào)試單元測(cè)試
在文件中顯示代碼覆蓋率
結(jié)論
前言：
Jest是一個(gè)流行的JavaScript測(cè)試框架，它提供了簡(jiǎn)潔、靈活和強(qiáng)大的工具來(lái)編寫(xiě)和運(yùn)行單元測(cè)試。在Visual Studio Code（VS Code）中使用Jest可以進(jìn)一步提升單元測(cè)試的效率和體驗(yàn)。
使用 Jest 擴(kuò)展顯著改善測(cè)試流程
??我用 Jest 編寫(xiě)單元測(cè)試已經(jīng)有 5-6 年了。 它總是能夠?yàn)轭?、方法和組件編寫(xiě)適當(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ǔ)句和分支的百分比。
●未測(cè)試的行標(biāo)有紅色背景。 這有助于一目了然地找出代碼中未經(jīng)測(cè)試的路徑。
●部分測(cè)試的代碼標(biāo)有黃色背景。 例如，下面的三元運(yùn)算符僅在一種情況下進(jìn)行了測(cè)試，但從未到達(dá) else 子句。
結(jié)論
如果你像我一樣只使用過(guò) CLI 界面進(jìn)行單元測(cè)試，我強(qiáng)烈建議你嘗試一下編輯器工具。 在我親身體驗(yàn)之前，我不知道我到底有多需要它。
??作為一位過(guò)來(lái)人也是希望大家少走一些彎路
在這里我給大家分享一些自動(dòng)化測(cè)試前進(jìn)之路的必須品，希望能對(duì)你帶來(lái)幫助。
（WEB自動(dòng)化測(cè)試、app自動(dòng)化測(cè)試、接口自動(dòng)化測(cè)試、持續(xù)集成、自動(dòng)化測(cè)試開(kāi)發(fā)、大廠面試真題、簡(jiǎn)歷模板等等）
相信能使你更好的進(jìn)步！
點(diǎn)擊下方小卡片文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-540829.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-540829.html
到了這里，關(guān)于使用 Jest 在 Visual Studio Code 中進(jìn)行更好的單元測(cè)試的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
