试图让赛普拉斯，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
  }
}

它涵盖了所有代码，但必须有一个由汇总生成的分支，它已被传递。 但我真的认为赛普拉斯不打算用于这样的功能测试