2

我想用柏树在前端进行代码覆盖。目前,cypress 推荐伊斯坦布尔进行覆盖。不幸的是,我不能在下面的堆栈中使用它:

  • vue-property-decorator
  • 伊斯坦布尔代码覆盖率。
  • 打字稿。

因为: - 我没有找到让 istanbul 与 ts-loader 一起工作的方法,因为 istanbul-intementer-loader在后台使用 babel - babel-loader 不像 typescript 那样支持装饰器,这会破坏vue 属性装饰器。在没有 vue-property-decorator 的打字稿中使用 vue 并不是那么整洁......

这里有一些有用的链接:

这是回购和快速概述:

  • git clone https://github.com/akoidan/vue-webpack-typescript && cd vue-webpack-typescript
  • yarn install
  • yarn run build
  • yarn run e2e

您还可以查看上面 repo 上的 babel 分支,以查看使用 babel 而不是 ts-loader 的示例

这是使用 ts-loader 进行设置的示例:

包.json

{
  "nyc": {
    "extends": "@istanbuljs/nyc-config-typescript",
    "all": true
  }
}

赛普拉斯/iintegration/sample_spec.ts

describe('My first Test', function() {
    it('Does not much', function() {
        cy.visit('/');
        cy.contains('Filtered Users');
    })
});

赛普拉斯/插件/index.js

module.exports = (on) => {
    on('task', require('@cypress/code-coverage/task'));
    on('file:preprocessor', require('@cypress/code-coverage/use-browserify-istanbul'));
};

赛普拉斯/支持/index.js

import './commands'
import '@cypress/code-coverage/support';

测试铬开发工具

window.__coverage__ // undefined

标准输出

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|
4

1 回答 1

0
  • 似乎没有办法使用 ts-loader 进行覆盖
  • 需要 babel 7 + babel-preset-typescript-vue 才能使其与 vue-property-decorator 一起使用

这是带有工作codecov的 github repo 的示例

于 2019-11-16T19:18:30.040 回答