測(cè)試JavaScript：Jest

Jest

此功能僅在Ultimate版本中受支持。

Jest是客戶端JavaScript應(yīng)用程序和React應(yīng)用程序的測(cè)試平臺(tái)。從Jest官方網(wǎng)站了解有關(guān)該平臺(tái)的更多信息 。

您可以在IntelliJ IDEA中使用Jest運(yùn)行和調(diào)試測(cè)試。您可以在樹(shù)視圖中查看測(cè)試結(jié)果，并從那里輕松導(dǎo)航到測(cè)試源。測(cè)試狀態(tài)顯示在編輯器的測(cè)試旁邊，其中包含快速運(yùn)行或調(diào)試的選項(xiàng)。

安裝Jest

• 打開(kāi)內(nèi)置的IntelliJ IDEA 終端（Alt+F12）并在命令提示符下輸入：npm install --save-dev jest。另請(qǐng)參閱Jest官方網(wǎng)站。

運(yùn)行測(cè)試

使用IntelliJ IDEA，您可以直接從編輯器快速運(yùn)行單個(gè)Jest測(cè)試，或創(chuàng)建運(yùn)行/調(diào)試配置以執(zhí)行部分??或全部測(cè)試。

從編輯器運(yùn)行單個(gè)測(cè)試

• 單擊左側(cè)裝訂線中的 或 ，然后從彈出列表中選擇“運(yùn)行<test_name> ”。因?yàn)樵谧髠?cè)裝訂線中有測(cè)試狀態(tài)圖標(biāo) ，因此您還可以在編輯器中查看測(cè)試是否已通過(guò)或失敗。

創(chuàng)建Jest運(yùn)行配置

1. 在“項(xiàng)目”工具窗口中選擇一個(gè)測(cè)試文件，然后在上下文菜單中選擇“創(chuàng)建<文件名> ”。將打開(kāi)“運(yùn)行/調(diào)試配置：Jest”對(duì)話框。

2. 指定要使用的Node.js解釋器。這可能是一個(gè)本地Node.js的解釋或適用于Linux的Windows子系統(tǒng)的Node.js。

3. 指定jest， react-scripts，react-script-ts，react-super-scripts，或react-awesome-scripts包的位置，和應(yīng)用程序的工作目錄。

   默認(rèn)情況下，工作目錄字段顯示項(xiàng)目根文件夾。要更改此預(yù)定義設(shè)置，請(qǐng)指定所需文件夾的路徑，或從列表中選擇以前使用的文件夾。

4. （可選）指定要使用的jest.config文件：從下拉列表中選擇相關(guān)文件，或單擊 ，然后在打開(kāi)的對(duì)話框中選擇它，或者只在文本框中輸入路徑。如果該字段為空，IntelliJ IDEA將查找?guī)в衘est密鑰的package.json文件。在文件系統(tǒng)中從工作目錄向上執(zhí)行搜索。如果找不到合適的package.json文件，則動(dòng)態(tài)生成Jest默認(rèn)配置。

5. （可選）配置在相關(guān)源文件中的更改時(shí)自動(dòng)重新運(yùn)行測(cè)試。為此，請(qǐng)?jiān)贘est選項(xiàng)字段中添加--watch標(biāo)志。

通過(guò)運(yùn)行配置運(yùn)行測(cè)試

1. 從主工具欄上的列表中選擇Jest運(yùn)行/調(diào)試配置，然后單擊列表右側(cè)的 。

2. 測(cè)試服務(wù)器自動(dòng)啟動(dòng)，無(wú)需您執(zhí)行任何步驟。在“運(yùn)行”工具窗口中查看和分析來(lái)自測(cè)試服務(wù)器的消息。

3. 在 “運(yùn)行” 工具窗口的“測(cè)試運(yùn)行器”選項(xiàng)卡中監(jiān)視測(cè)試執(zhí)行。

重新運(yùn)行失敗的測(cè)試

• 在Test Runner選項(xiàng)卡中，單擊工具欄上的 。IntelliJ IDEA將執(zhí)行上一個(gè)會(huì)話期間失敗的所有測(cè)試。

• 要重新運(yùn)行特定的失敗測(cè)試，??請(qǐng)?jiān)谄渖舷挛牟藛沃羞x擇“運(yùn)行<測(cè)試名稱>”。

導(dǎo)航

使用IntelliJ IDEA，您可以在文件和相關(guān)的測(cè)試文件之間切換。還支持從“測(cè)試運(yùn)行器”選項(xiàng)卡中的測(cè)試結(jié)果導(dǎo)航到測(cè)試。

在文件和相關(guān)測(cè)試文件之間切換

• 在編輯器中打開(kāi)文件，然后上下文菜單中選擇：Go To|測(cè)試，或Go To|測(cè)試主題，或者只需按Ctrl+Shift+T。

從測(cè)試結(jié)果切換到測(cè)試

• 在Test Runner選項(xiàng)卡中選擇測(cè)試名稱，然后在上下文菜單中選擇Jump to Source。

   
  測(cè)試文件在編輯器中打開(kāi)，光標(biāo)位于測(cè)試定義中。

快照測(cè)試

IntelliJ IDEA與Jest的集成支持快照測(cè)試等強(qiáng)大功能。如果快照與呈現(xiàn)的應(yīng)用程序不匹配，則測(cè)試失敗。這表示代碼中的某些更改導(dǎo)致此不匹配或快照已過(guò)時(shí)且需要更新。您可以在IntelliJ IDEA內(nèi)置差異查看器中查看導(dǎo)致這種不匹配的原因。

更新失敗測(cè)試的快照

• 使用“運(yùn)行”工具窗口的“測(cè)試運(yùn)行器”選項(xiàng)卡中的“單擊以更新快照”鏈接：

  

從測(cè)試文件導(dǎo)航到相關(guān)的快照文件

• 單擊測(cè)試旁邊的左側(cè)裝訂線的 。

• 將光標(biāo)置于toMatchSnapshot()，按下Ctrl+Alt+Home，然后從列表中選擇所需的快照。

  

將實(shí)際輸出與預(yù)期快照進(jìn)行比較

• 使用“測(cè)試運(yùn)行器”選項(xiàng)卡右側(cè)窗格中的“單擊以查看差異”鏈接。

  

調(diào)試測(cè)試

使用IntelliJ IDEA，您可以直接從編輯器快速開(kāi)始調(diào)試單個(gè)Jest測(cè)試，或創(chuàng)建運(yùn)行/調(diào)試配置來(lái)調(diào)試部分或全部測(cè)試。

從編輯器開(kāi)始調(diào)試單個(gè)測(cè)試

• 在左側(cè)裝訂線點(diǎn)擊 或 ，并從彈出的列表中選擇：調(diào)試<TEST_NAME>。

通過(guò)運(yùn)行/調(diào)試配置啟動(dòng)測(cè)試調(diào)試

1. 如上所述，創(chuàng)建Jest運(yùn)行/調(diào)試配置。

2. 從主工具欄上的列表中選擇Jest運(yùn)行/調(diào)試配置，然后單擊列表右側(cè)的 。

3. 在打開(kāi)的調(diào)試工具窗口中，像往常一樣繼續(xù)：逐步完成測(cè)試，停止并恢復(fù)測(cè)試執(zhí)行，暫停時(shí)檢查測(cè)試等。

監(jiān)控代碼覆蓋率

使用IntelliJ IDEA，您還可以監(jiān)控Jest測(cè)試涵蓋的代碼量 。IntelliJ IDEA在專用工具窗口中顯示此統(tǒng)計(jì)信息，并在編輯器中直觀地標(biāo)記有遮蓋和未遮蓋的線條。

運(yùn)行覆蓋范圍的測(cè)試

1. 如上所述，創(chuàng)建Jest運(yùn)行/調(diào)試配置。

2. 從主工具欄上的列表中選擇Jest運(yùn)行/調(diào)試配置，然后單擊列表右側(cè)的 。

3. 或者，從編輯器快速運(yùn)行特定套件或覆蓋測(cè)試：在左側(cè)裝訂線中單擊 或 ，從彈出列表中選擇“帶有Coverage的Run <test_name>”。

4. 在Coverage工具窗口中監(jiān)視代碼覆蓋率。該報(bào)告顯示測(cè)試覆蓋了多少文件以及其中包含的行的百分比。從報(bào)告中，您可以跳轉(zhuǎn)到該文件并查看覆蓋的線條 - 標(biāo)記為綠色 - 以及未覆蓋的線條 - 標(biāo)記為紅色：