“伊斯坦布爾忽略下一個”命令似乎被忽略了

Question

我正在嘗試使用 Jest 來測試我的代碼。 在我嘗試從測試中排除 class 方法之前，它工作得很好。

querySelector() 調用是我想跳過此方法進行測試的原因（“文檔”顯然是 null，除非我在瀏覽器中運行腳本）

我嘗試了這個解決方案，這似乎是最推薦的一個：

  /* istanbul ignore next */
  appendNewInputFields() {

    const howMany = Number(document.querySelector('#items-to-add').value);
    
    [...Array(howMany)].forEach( i => {
      const newInputField = this.createNewItemInputField();
      this.inputItemsContainerNode.append(newInputField);
    });
  }

但是測試一直失敗，並且/* istanbul ignore next */行似乎被忽略了。

我還嘗試在 function 簽名及其正文之間添加評論（正如這里某處所建議的那樣），但沒有運氣：

 FAIL  js/DOMManager.test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'value' of null

      135 |   appendNewInputFields() /* istanbul ignore next */ {
      136 |
    > 137 |     const howMany = Number(document.querySelector('#items-to-add').value);
          |                            ^
      138 |     

我讀過這可能與babel-plugin-istanbul有關。 我試過了

npm --save-dev uninstall babel-plugin-istanbul

在終端返回：

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

removed 18 packages and audited 521 packages in 2.178s

但是文件夾babel-plugin-istanbul仍然存在於我的工作文件夾內的/node_modules/中，並且測試一直失敗，好像沒有任何改變一樣。

如果我注釋掉 function 的主體，其他測試套件可以完美運行。 如果我嘗試將忽略下一個命令應用於代碼的任何其他部分，則測試通過就好了，並且該行被完全忽略。

如果我嘗試手動刪除/babel-plugin-istanbul/文件夾（從我的工作文件夾中的 /node_modules/ 刪除），Jest 將停止工作。

（這是我第一次安裝 Node.js，我這樣做只是因為我想用 Jest 開始單元測試。我指出這一點是因為這是我走出香草世界的第一步。我不知道如何為了處理 Node.js 和 npm，我剛剛啟動了幾個命令來安裝它，我為 Jest 編寫了一些測試，它們都立即運行良好。我沒有使用任何其他框架，我試圖堅持使用 vanilla JS盡可能。）

- - - - - - - - - - - - 編輯：

我嘗試將代碼更改為：

  appendNewInputFields() {
    // TODO solve the istanbul ignore issue
    
    let howMany;

    /* istanbul ignore if */
    if(document != null) {
      howMany = Number(document.querySelector('#items-to-add').value);
    
      [...Array(howMany)].forEach( i => {
        const newInputField = this.createNewItemInputField();
        this.inputItemsContainerNode.append(newInputField);
      });

      console.log("added " + howMany + " input fields");
    }
  }

我不斷得到

 FAIL  js/DOMManager.test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'value' of null

      139 |     /* istanbul ignore if */
      140 |     if(document != null) {
    > 141 |       howMany = Number(document.querySelector('#items-to-add').value);
          |                        ^
      142 |     
      143 |       [...Array(howMany)].forEach( i => {
      144 |         const newInputField = this.createNewItemInputField();

在這一點上我完全無能為力。 鑒於條件，“文檔”應該是 null 並且該塊完全跳過，但它一直未能通過測試。

在瀏覽器中運行時，相同的代碼完全按照預期工作。

Answer 1

所以我在一個空白的新文件夾中做了一些測試，它終於讓我印象深刻。

顯然我誤解了/* istanbul ignore next */的目的。

它的 function 不是在測試期間跳過代碼執行，而是在確定已測試的總代碼量時防止將那部分代碼考慮在內。 代碼運行（如果有任何東西調用該函數），但是當 Jest 總結它測試的行數時，這些行不計算在內（我猜這是 --coverage 的目的）。 如果發生錯誤，它會像往常一樣被拋出。

我的問題與 Jest 或伊斯坦布爾 package 無關。 我現在意識到這一點感覺很愚蠢，但我需要的只是適當的異常處理。

我實現了一些老式的 try/catch 塊：現在一切都順利進行了測試，並且 istanbul ignore 指令按預期正確運行（現在我知道會發生什么）：未測試並標記為被忽略的函數，它們只是不要出現在最終的報道中。

我希望這可以幫助任何可能陷入我同樣誤解的人。

當然，如果有比我更有能力的人能證實這種解釋，或者有任何建議或進一步的解釋，顯然將不勝感激。