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

Question

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

我专门为此问题创建了git repository 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代码。赛普拉斯也可以测试我最初用TypeScript编写的功能。

现在，我想为这些测试设置覆盖率报告。在赛普拉斯常见问题解答上，我们可以找到问题 Is there code coverage? ，当前答案是否（关于内置功能），但in discussion是欢迎将来做的事情，以及in fact it can be done。

问题是：做到这一点的人没有使用TypeScript。我是。因此，我需要做一些额外的步骤，这就是我目前遇到的问题。凭直觉，我认为这只是配置IstanbulJS以正确地遵循源映射的问题，但是我找不到有关如何执行此操作的任何文档。 Every guide about TypeScript + IstanbulJS that I can find假设我使用的是Mocha，但我不是-我使用的是赛普拉斯（Cypress），其源代码来自TypeScript。

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

---

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

Answer 1

我使用了import codecs file_object = codecs.open( 'textfile.txt', "w", "utf-8" ) xmlRaw = (data to be written to text file ) newxml = xmlRaw.split('\n') for n in newxml: file_object.write(n+u"\r\n") + webpack + babel-loader + @babel/preset-typescript

该策略基本上是：

• 输入您的应用代码，以便在babel-plugin-istanbul上生成覆盖率
• 运行cypress规范后，使用window.__coverage__将报告保存到cy.writeFile
• 并使用.nyc_output
生成报告

然后，您应该能够在cy.exec('nyc report --reporter=html')目录中查看html coverage报告

这是我对您的项目所做的更改，切换到coverage/并具有完整的代码覆盖范围：

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

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

create-react-app-ejected：

在新推出的create-react-app上设置代码覆盖的

cypress 使用：

• typescript + webpack
• @babel/preset-typescript
• @cypress/webpack-preprocessor
• babel-loader

vanilla-typescript-webpack：

香草打字稿和Webpack项目的代码覆盖率 使用：

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

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

Answer 2

我花了一些时间试图解决这个问题。汇总如何生成兼容代码似乎是一个问题。通过更改您的tsconfig目标，我可以使分支达到75％

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

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