試圖讓賽普拉斯，TypeScript和IstanbulJS協同工作

Question

我正在嘗試使用IstanbulJS生成代碼覆蓋率報告，以便用TypeScript編寫代碼並使用賽普拉斯進行測試。 但事情報告不合適：

我專門為這個問題創建了一個git存儲庫 MCVE ，所以你可以重現我的情況：

git clone https://github.com/papb/cy-ts-istanbul-question
cd cy-ts-istanbul-question
npm install
npm test
# And then open the file `coverage/index.ts.html` to see the image above.

如何解決？

---

細節

我有一些用TypeScript編寫的代碼，我將其轉換並捆綁到一個帶有匯總 ， rollup-plugin-typescript2和rollup-plugin-istanbul的 JavaScript（ES6）文件。 這非常有效，我在TypeScript中的源代碼成為一個准備好將<script>標記包含在瀏覽器中並使用的文件。

其次，我使用cypress在HTML頁面上運行測試，其中包含上面提到的已編譯的JS代碼。 這也很有效，cypress能夠測試我最初用TypeScript編寫的函數。

現在，我想為這些測試設置覆蓋率報告。 在賽普拉斯常見問題解答中我們可以找到問題是否有代碼覆蓋？ 答案目前沒有 （關於內置功能），但是在討論中作為將來要做的值得歡迎的事情，事實上它可以完成 。

問題是：上面做過的人沒有使用TypeScript。 我是。 所以我還有一些額外的步驟要做，這就是我目前陷入困境的地方。 直覺上，我認為這只是配置IstanbulJS以正確遵循源映射的問題，但我找不到任何有關如何執行此操作的文檔。 我能找到的關於TypeScript + IstanbulJS的每個指南都假定我使用的是Mocha，但我不是 - 我正在使用賽普拉斯來自TypeScript的轉換源。

注意：我知道一般來說通常的“代碼覆蓋”方法對cypress測試沒有多大意義，但在我的確切情況下我認為確實如此，我已經考慮過了，請不要制作這個框架挑戰這個問題。

---

編輯：要清楚，在這里使用匯總並不是一個硬性要求。 如果你有一個使用其他東西的解決方案，它也是完全可以接受的。 重要的是，正如標題所說，賽普拉斯+ TypeScript + IstanbulJS。

Answer 1

我使用了webpack + babel-loader + @babel/preset-typescript + babel-plugin-istanbul

基本上策略是：

• 檢測您的應用代碼，以便在window.__coverage__生成window.__coverage__
• 在cypress規范運行后，使用cy.writeFile將報告保存到.nyc_output
• 並使用cy.exec('nyc report --reporter=html')生成報告cy.exec('nyc report --reporter=html')

然后，您應該能夠在coverage/目錄中查看html覆蓋率報告

以下是我對您的項目所做的更改，切換到具有完全webpack代碼覆蓋率的webpack ：

https://github.com/Bkucera/cypress-code-coverage/commit/40f88aa27778dc55ad3fae56af66724f73b6496d

我在這里匯總了其他工作示例。 它提供了在新推出的create-react-app （使用webpack ）和vanilla typescript + webpack項目之上設置代碼覆蓋率的示例：

create-react-app-ejected ：

在新推出的create-react-app上設置代碼覆蓋率的cypress 使用 ：

• @babel/preset-typescript
• @cypress/webpack-preprocessor
• babel-loader
• babel-plugin-istanbul

vanilla-typescript-webpack ：

vanilla typescript和webpack項目的代碼覆蓋率使用 ：

• @babel/preset-typescript
• @cypress/webpack-preprocessor
• babel-loader
• babel-plugin-istanbul

在這兩個中我還會檢測柏樹代碼，以便您可以合並覆蓋率報告，但我目前不這樣做

Answer 2

我花了一些時間試圖解決這個問題。 匯總生成兼容代碼的方式似乎是一個問題。 通過更改tsconfig目標，我能夠將分支高達75％

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  }
}

它涵蓋了所有代碼，但必須有一個由匯總生成的分支，它已被傳遞。 但我真的認為賽普拉斯不打算用於這樣的功能測試