使用 Nuxt 对 VueJS 应用程序的 Jest 测试覆盖率

Posted 2023-02-22

【中文标题】使用 Nuxt 对 VueJS 应用程序的 Jest 测试覆盖率

【英文标题】：Jest test coverage for VueJS application with Nuxt

【发布时间】：2019-06-04 21:13:49

【问题描述】：

我有用 NuxtJS 编写的 VueJS 应用程序。此设置导致我在不同目录中有许多文件 index.vue。 当我使用推荐 jest --no-cache --watch --coverage 运行测试套件时，覆盖结果只拾取了 1 个文件 index.vue。

我在 package.json 中 jest 的配置是：

"jest": 
    "transform": 
      "^.+.vue$": "vue-jest",
      "^.+.js$": "babel-jest"
    ,
    "collectCoverage": true,
    "collectCoverageFrom": [
      "**/*.js,vue",
      "!**/node_modules/**"
    ],
    "coverageReporters": [
      "text"
    ],
    "setupTestFrameworkScriptFile": "jest-extended"

结果仅显示 1 个 index.vue 文件的覆盖率（即使我有多个以及其他 .vue 文件）。

我需要添加什么配置选项来运行覆盖所有 .vue 文件？

【问题讨论】：

能否显示覆盖率表和文件夹结构？

【参考方案1】：

乍一看，我希望看到 Jest 的 moduleFileExtensions config option 像这样：

 "jest": 
    "moduleFileExtensions": ["js", "json", "jsx", "node", "vue"],
    // The rest of your config...
  

该选项告诉 Jest 应用程序的模块使用哪些文件扩展名。

【讨论】：

不幸的是，这对我不起作用。只有index.vue 得到了报道，我有完全相同的配置。

通过在 Vue 文件的脚本部分导出 Vue 实例来解决此问题。