VueJS 组件：具有 vue-class-component 的单独文件的代码覆盖率

Posted 2023-02-22

【中文标题】VueJS 组件：具有 vue-class-component 的单独文件的代码覆盖率

【英文标题】：VueJS Component: Code coverage for separate file with vue-class-component

【发布时间】：2020-02-29 17:12:52

【问题描述】：

我正在尝试为使用 vue-class-component 装饰器以 TypeScript 编写的 VueJS 组件生成代码覆盖率，并为组件的实际逻辑使用单独的 .ts 文件。例如。对于一个 VueJS 组件，我实际上有两个文件，一个带有 html 模板的 .vue 文件，该文件将包含数据/属性/方法的 .ts 文件调用到类组件中。

对于运行测试，我使用vue-test-utils 和mocha-webpack 并使用istanbul/nyc 完成代码覆盖。

这是我的package.json 测试专用配置：

这里是我的 webpack 配置文件中的覆盖规则：

最后还有一个 VueJS ProgressBar 组件的测试摘录：

该组件的测试运行良好，但ProgressBar 组件未在我的报道中列出。

我发现覆盖类组件的唯一解决方法是在测试中实际实例化它们（例如progressBar = new ProgressBarClass()），但这违背了 vue-test-utils 的目的......有什么想法吗？

非常感谢您的帮助！

【问题讨论】：

你解决了吗？

不，我还没解决。

【参考方案1】：

我遇到了同样的问题，只需将 ts-jest 更新到 >= 23.10 的版本即可解决覆盖率报告

【讨论】：

这不是一个真正的答案，你应该把这个评论写成评论。

感谢您的反馈 Diego - 但是这并没有解决我的问题（我没有使用 ts-jest）