在 ts + Jest 單元測試中 debugging

本文簡要介紹瞭如何在 Jest 單元測試中利用 Chrome Node DevTools 來輔助調試

一、背景

• 代碼是 TS 寫的
• 所測功能無 UI 界面，且出現 bug 初步定位到是循環體內部問題，功能較爲複雜
• 用 console 式 debug 效率過低，須要打斷點式調試

在 Jest 單測中進行 debugger 目前有兩種方法：1. VSCode 提供的 Debugger 功能； 2. Chrome Node DevTools

剛開始我用 VSCode 的 Debugger 功能，在 TS 源碼進行 debugger 時候，發如今源碼上打斷點沒法準肯定位：

遂採用 Chrome Node DevTools 調試方法，主要是參考 調試Jest 這篇文章來進行設置。

二、步驟

1. 在認爲可能失敗並輸入的測試中插入一個 debugger。這將做爲斷點
2. 打開 Chrome 並輸入地址欄：chrome://inspect，
3. 點擊 Open dedicated DevTools for Node會彈出一個單獨的 devtools 窗口，前端同窗最熟悉不過了：

1. 執行命令 node --inspect node_modules/.bin/jest --runInBand <path/to/testfile>

--runInBand 選項，表示僅在當前的進程中連續運行全部測試，而非經過建立的子進程的工做池來運行測試。Jest運行測試用例的特色是多進程併發運行不一樣測試案例，達到快速的效果。可是這樣對調試來講是無法進行的。這個參數保證了使用一個進程運行全部代碼。

接下來就能夠開心的 debug 了：

三、總結

1. 若是功能代碼是 js 寫的，推薦直接用 VSCode 提供的 Debugger 功能來調試會比較方便（具體設置請看下方的 」參考文章「）；
2. 若是代碼是 TS 寫的，或者設計的邏輯較爲複雜，仍是推薦使用 Chrome Node DevTools 方式調試，用起來比較順手
3. 固然，有本身喜好的調試方式，請忽略上述兩條

附：參考文章

• 調試Jest：簡要總結了用 Chrome 調試和 VSCode 調試，本文所用的 Chrome 調試 就是經過這篇文章學會的
• debugging-jest-tests：微軟官方倉庫中給出的 VScode 中 launch.json 的配置項教程，涵蓋了 debug 所有測試文件 和 debug 單個測試文件 這兩種場景，足夠了
• Debugging TypeScript Jest Tests With Visual Studio Code：文中給出針對 ts + jest 的 launch.json 的配置項，能夠借鑑一下
• 使用jest+enzyme進行react項目測試 - debug篇：雖然說是 2017 年的文章，仍舊有可借鑑性
• Debugging with TypeScript, Jest, ts-jest and Visual Studio Code：對新手友好的單元測試 debugger 入門文章，一步步教你；

如下是個人公衆號，會時常更新 JS(Node.js) 知識和資訊，歡迎掃碼關注交流。