试图使Cypress，TypeScript和IstanbulJS一起工作

Question

我试图用IstanbulJS为我用TypeScript编写并经Cypress测试的代码生成代码覆盖率报告。但是事情变得不合时宜：

我专门针对此问题创建了一个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，rollup-plugin-typescript2和rollup-plugin-istanbul转换并捆绑到一个JavaScript（ES6）文件中。这非常完美，我在TypeScript中的源代码变成了一个文件，可以随<script>标签一起包含在浏览器中并使用。

其次，我使用cypress在HTML页面上运行测试，该页面包含上述转译的JS代码。cypress也可以完美地工作，赛普拉斯能够测试我最初用TypeScript编写的函数。

现在，我想为这些测试设置覆盖率报告。在赛普拉斯常见问题解答上，我们可以找到问题是否存在代码覆盖率？目前尚无答案（关于内置功能），但正在讨论中，这是将来要做的受欢迎的事情，并且实际上可以做到。

问题是：上面的人没有使用TypeScript。我是。因此，我需要做一些额外的步骤，这就是我目前遇到的问题。凭直觉，我认为这只是配置IstanbulJS以正确遵循源映射的问题，但是我找不到有关如何执行此操作的任何文档。我所能找到的每本有关TypeScript + IstanbulJS的指南都假设我正在使用Mocha，但我不是-我正在使用Cypress和来自TypeScript的转译源。

注意：我知道一般来说，进行赛普拉斯测试的通常“代码覆盖率”方法没有多大意义，但是在我的确切情况下，我认为确实如此，我已经考虑过了，请不要制作此框架挑战这个问题。

---

编辑：要清楚，在这里使用汇总并不是硬性要求。如果您有使用其他解决方案的解决方案，那也是完全可以接受的。正如标题所述，重要的是Cypress + TypeScript + IstanbulJS。

Answer 1

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

基本上，策略是：

• 检测您的应用程序代码，以便生成覆盖率 window.__coverage__
• 赛普拉斯规格运行后，用于cy.writeFile将报告保存到.nyc_output
• 并生成报告 cy.exec('nyc report --reporter=html')

然后，您应该可以在coverage/目录中查看html coverage报告

这是我对您的项目所做的更改，并webpack在完全正常的代码覆盖下切换到此更改：

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

我在这里整理了其他工作示例。它具有在新弹出的create-react-app（使用webpack）和typescript + webpack原始项目之上设置代码覆盖率的示例：

create-react-app-ejected：

柏树在新推出的用途上设置了代码覆盖率：create-react-app

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

vanilla-typescript-webpack：

普通打字稿和Webpack项目上的代码覆盖率 使用：

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

在这两种方法中，我还检测了赛普拉斯代码，以便您可以合并覆盖率报告，但是我目前不这样做