typescript - การครอบคลุมของ cypress ใช้งานไม่ได้กับ vue-property-decorator

ฉันต้องการมีการวัดความครอบคลุมของโค้ดบนฟรอนต์เอนด์ด้วย Cypress ปัจจุบัน Cypress แนะนำให้ใช้ Istanbul สำหรับการวัดความครอบคลุม น่าเสียดายที่ฉันไม่สามารถใช้มันได้คู่กับสแต็คด้านล่างนี้:

vue-property-decorator
ไซเปรส
การครอบคลุมโค้ดของ Istanbul
ไทป์สคริปต์

เนื่องจากว่า: - ฉันไม่พบวิธีทำให้ Istanbul ทำงานร่วมกับ ts-loader ได้ เพราะว่า istanbul-instrumenter-loader ใช้ Babel อยู่เบื้องหลัง - babel-loader ไม่รองรับ decorators ในลักษณะเดียวกับที่ TypeScript ทำ ซึ่งทำให้ vue-property-decorator ใช้งานไม่ได้ การใช้ Vue ใน TypeScript โดยไม่ใช้ vue-property-decorator ก็ไม่ค่อยเรียบร้อยนัก...

นี่คือบางลิงก์ที่เป็นประโยชน์:

ตัวอย่างสำหรับรีโปที่มีการครอบคลุมของเบเบิล
คู่มือทางการ
เก็บข้อมูลอย่างเป็นทางการของ GitHub สำหรับผู้ใช้ TypeScript
ปัญหาไซเพรส

นี่คือรีโปและภาพรวมอย่างรวดเร็ว:

git clone https://github.com/akoidan/vue-webpack-typescript && cd vue-webpack-typescript

```
yarn install
```
```
yarn run build
```
```
yarn run e2e
```

คุณสามารถตรวจสอบสาขา 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

stdout:

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

คำตอบ #1

ดูเหมือนไม่มีวิธีที่จะทำให้การครอบคลุมทำงานกับ ts-loader
ต้องใช้ babel 7 + babel-preset-typescript-vue เพื่อให้สามารถใช้งานกับ vue-property-decorator ได้

นี่คือตัวอย่างของรีโป GitHub ที่มี Codecov ทำงานอยู่