尝试让 Cypress、TypeScript 和 IstanbulJS 协同工作

Question

我正在尝试使用 IstanbulJS for my code written in TypeScript and tested with 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 and rollup-plugin-istanbul 将其转换并捆绑到单个 JavaScript (ES6) 文件中。这非常有效，我在 TypeScript 中的源代码变成了一个文件，可以用 <script> 标记包含在浏览器中并使用。

其次，我使用 cypress 对 HTML 页面进行运行测试，其中包含上述转译的 JS 代码。这也很完美，cypress 能够测试我最初用 TypeScript 编写的函数。

现在，我想为这些测试设置覆盖率报告。在赛普拉斯常见问题解答中，我们可以找到问题 Is there code coverage? to which the answer is currently no (regarding built-in functionality) but is in discussion as a welcome thing to be done in the future, and in fact it can be done.

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

注意：我知道一般来说，通常的 "code coverage" 柏树测试方法没有多大意义，但在我的具体情况下，我认为它确实如此，我认为关于它，请不要让这个框架挑战这个问题。

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

Answer 1

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

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

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

Answer 2

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

基本上策略是：

检测您的应用代码，以便在 window.__coverage__
cypress 规范运行后，使用 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、TypeScript 和 IstanbulJS 协同工作

Trying to make Cypress, TypeScript and IstanbulJS work together

javascript

typescript

istanbul

rollupjs

cypress

详情

create-react-app-ejected:

vanilla-typescript-webpack: