柏树覆盖不适用于 vue-属性-decorator
cypress coverage doesn't work with vue-property-decorator
我想在前端使用 cypress 进行代码覆盖。目前 cypress 推荐使用 istanbul 进行覆盖。不幸的是我不能在下面的堆栈中使用它:
- vue-属性-装饰器
- 柏树
- 伊斯坦布尔代码覆盖率。
- 打字稿。
因为:
- 我没有找到让 istanbul 与 ts-loader 一起工作的方法,因为 istanbul-intementer-loader uses babel under the hood
- babel-loader 不像 typescript 那样支持装饰器,breaks vue-property-decorator。在打字稿中使用 vue w/o vue-属性-decorator 不是那么整洁...
这里有一些有用的 link:
- example for repo with babel coverage
- official guide
- official github repo for typescript users
- cypress issue
Here's 回购和快速概览:
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 的设置示例:
package.json:
{
"nyc": {
"extends": "@istanbuljs/nyc-config-typescript",
"all": true
}
}
cypress/iintegration/sample_spec.ts:
describe('My first Test', function() {
it('Does not much', function() {
cy.visit('/');
cy.contains('Filtered Users');
})
});
cypress/plugins/index.js:
module.exports = (on) => {
on('task', require('@cypress/code-coverage/task'));
on('file:preprocessor', require('@cypress/code-coverage/use-browserify-istanbul'));
};
cypress/support/index.js:
import './commands'
import '@cypress/code-coverage/support';
测试chrome开发工具:
window.__coverage__ // undefined
标准输出:
----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files | 0 | 0 | 0 | 0 | |
----------|----------|----------|----------|----------|-------------------|
- 似乎无法使用 ts-loader 进行覆盖
- babel 7 + babel-preset-typescript-vue 需要使用 vue-属性-decorator
这里是 github 回购的示例 codecov
我想在前端使用 cypress 进行代码覆盖。目前 cypress 推荐使用 istanbul 进行覆盖。不幸的是我不能在下面的堆栈中使用它:
- vue-属性-装饰器
- 柏树
- 伊斯坦布尔代码覆盖率。
- 打字稿。
因为: - 我没有找到让 istanbul 与 ts-loader 一起工作的方法,因为 istanbul-intementer-loader uses babel under the hood - babel-loader 不像 typescript 那样支持装饰器,breaks vue-property-decorator。在打字稿中使用 vue w/o vue-属性-decorator 不是那么整洁...
这里有一些有用的 link:
- example for repo with babel coverage
- official guide
- official github repo for typescript users
- cypress issue
Here's 回购和快速概览:
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 的设置示例:
package.json:
{
"nyc": {
"extends": "@istanbuljs/nyc-config-typescript",
"all": true
}
}
cypress/iintegration/sample_spec.ts:
describe('My first Test', function() {
it('Does not much', function() {
cy.visit('/');
cy.contains('Filtered Users');
})
});
cypress/plugins/index.js:
module.exports = (on) => {
on('task', require('@cypress/code-coverage/task'));
on('file:preprocessor', require('@cypress/code-coverage/use-browserify-istanbul'));
};
cypress/support/index.js:
import './commands'
import '@cypress/code-coverage/support';
测试chrome开发工具:
window.__coverage__ // undefined
标准输出:
----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files | 0 | 0 | 0 | 0 | |
----------|----------|----------|----------|----------|-------------------|
- 似乎无法使用 ts-loader 进行覆盖
- babel 7 + babel-preset-typescript-vue 需要使用 vue-属性-decorator
这里是 github 回购的示例 codecov