试图让 Cypress、TypeScript 和 IstanbulJS 一起工作

Posted 2023-02-19

【中文标题】试图让 Cypress、TypeScript 和 IstanbulJS 一起工作

【英文标题】：Trying to make Cypress, TypeScript and IstanbulJS work together

【发布时间】：2019-07-23 01:27:55

【问题描述】：

我正在尝试使用IstanbulJS 为我用TypeScript 编写并使用Cypress 测试的代码生成代码覆盖率报告。但事情的报道不合时宜：

我专门为这个问题创建了一个git repositoryMCVE，所以你可以准确地重现我的情况：

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 在包含上述转译的 JS 代码的 HTML 页面上运行测试。这也很完美，cypress 能够测试我最初用 TypeScript 编写的函数。

现在，我想为这些测试设置覆盖率报告。在 Cypress 常见问题解答中，我们可以找到问题 Is there code coverage?，目前的答案是 no（关于内置功能），但 in discussion 是值得欢迎的将来完成，in fact it can be done。

问题是：上面那个人没有使用 TypeScript。我是。所以我有一点额外的步骤要做，这就是我目前卡住的地方。直观地说，我认为这只是配置 IstanbulJS 以正确遵循源映射的问题，但我找不到任何有关如何执行此操作的文档。 Every guide about TypeScript + IstanbulJS that I can find 假设我正在使用 Mocha，但我不是 - 我正在使用 Cypress 和来自 TypeScript 的转译源。

注意：我知道一般来说，cypress 测试的通常“代码覆盖率”方法没有多大意义，但在我的确切情况下，我认为确实如此，我已经考虑过了，拜托不要对这个问题提出这个框架挑战。

---

编辑：需要明确的是，在这里使用汇总并不是硬性要求。如果你有一个使用其他东西的解决方案，它也是完全可以接受的。重要的是，正如标题所说，Cypress + TypeScript + IstanbulJS。

【问题讨论】：

你真的需要使用Cypress吗？对于类似的事情，我使用Intern.js 将 ES6 转换为 ES5，Rollup 和代码覆盖率就像一个魅力

@Troopers 你好，谢谢你的提示，我稍后会看看。我希望 cypress 进行界面测试、点击按钮、快照测试等。这正是 cypress 所擅长的。 Intern.js 也能做到这些吗？

Functionnal testing 受支持。对于快照我不确定

@Troopers 谢谢。我会考虑使用它，但现在我仍在 Cypress 中寻找解决方案。另外，您说您使用了转译 ES6 -> ES5，但是 TypeScript 呢？行得通吗？

Intern.js 是用 TypeScript 编写的，并通过 Intern 进行了测试。所以我认为这行得通

【参考方案1】：

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

基本上策略是：

检测您的应用程序代码，以便在window.__coverage__ 上生成覆盖范围 cypress spec 运行后，使用cy.writeFile 将报告保存到.nyc_output 并使用cy.exec('nyc report --reporter=html') 生成报告

您应该可以在coverage/目录中查看html覆盖率报告

以下是我对您的项目所做的更改，切换到 webpack 并具有完整的工作代码覆盖率：

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

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

create-react-app-ejected:

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

@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

在这两个中，我还检测了 cypress 代码，以便您可以合并覆盖率报告，但我目前不这样做

【讨论】：

完美！！非常感谢。赏金当之无愧。我还在你的仓库中打开了一个 PR，并做了一个小修复。在不久的将来，我将使用您的更改更新我自己的存储库，手动添加它们，部分，所以我完全理解发生了什么。现在我只有机会运行你的代码并看到它真的有效！非常感谢。

【参考方案2】：

我花了一些时间试图弄清楚这一点。汇总如何生成兼容代码似乎是一个问题。通过更改您的 tsconfig 目标，我能够将分支提高到 75%

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

它涵盖了所有代码，但必须有一个通过 rollup 生成的分支。但我真的不认为赛普拉斯是为这样的功能测试而设计的

【讨论】：

您好，首先，非常感谢您抽出宝贵时间:) 我现在正在打电话，现在无法详细查看，但稍后或明天会做。顺便说一句，如果您认为汇总搞砸了，请随时提出其他解决方案。 Rollup 不是这个问题的硬性要求，只有 TypeScript、IstanbulJS 和 Cypress 是。

再次感谢您的尝试，但这并没有真正解决我的问题。覆盖率发生了变化，但覆盖率报告中的所有内容仍然关闭：see here 我的输出与您的修改。