隨著React的流行，jest也成很多專案廣泛使用的測試框架。由於jest預設是併發執行測試，在日常的工作中發現很多同學對於如何除錯jest單元測試犯難。這些小細節有時真是“會者不難，難者不會“。這裡給大家介紹如何在code中除錯jest測試的小技巧。

注意： 這裡需要Node> v8.4. 之前的版本V8有bug,導致Jest測試中的斷點根本斷不到。

新增除錯任務

我們需要在Code中新增一個除錯任務。 內容如下：

{
    "type": "node",
    "request": "launch",
    "protocol": "inspector"
 
,
    "name": "Jest Debug",
    "program": "${workspaceRoot}/node_modules/jest/bin/jest",
    "stopOnEntry": false,
    "args": ["--runInBand", "--env=jsdom", "${fileBasename}"],
    "runtimeArgs": [
        "--inspect-brk"
     ],
     "cwd": "${workspaceRoot}",
     "sourceMaps": true,
     "console": "integratedTerminal"
 

}

這裡有一個jest的執行時引數：--runInBand 或者簡寫為 -i不知道大家注意到沒有？就是這個引數控制jest序列執行所有測試。

其他引數和設定我就不贅述了，大家自己檢視code的幫助學習。

設定斷點開始除錯

好了，現在你可以在code中開啟一個你需要除錯的測試檔案並設定好斷點。然後，狠狠的按下F5。接下來…… 同學，該你了！