vue.js - 忽略 VueJS 组件文件的代码覆盖率，尽管这些组件的测试已成功运行

问题描述

我正在尝试获取内置于 VueJS 的前端应用程序的代码覆盖率结果。显然，如果我创建一个组件然后为该组件编写一个测试（快照测试），IDE（WebStorm）会忽略该文件。

我做了一些研究，发现代码覆盖率只列出了包含可执行 JavaScript 的文件。就我而言，如果我创建一个组件并像这样从组件返回：

<template>
   ...
</template>

<script>
    export default {
        name: 'CustomButton',
        props: ['someText'],
        data() {
            return {};
        },
    };
</script>

它将工作并显示100% lines covered在 IDE 中。

如果我删除data

<template>
   ...
</template>

<script>
    export default {
        name: 'CustomButton',
        props: ['someText'],
    };
</script>

然后测试被覆盖忽略，即使快照测试成功完成。

如前所述，我正在使用 Jest 运行我的所有测试，使用以下配置：

"jest": {
        "setupFiles": [
            "jest-localstorage-mock"
        ],
        "moduleFileExtensions": [
            "js",
            "jsx",
            "json",
            "vue"
        ],
        "transform": {
            "^.+\\.vue$": "vue-jest",
            ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
            "^.+\\.jsx?$": "babel-jest"
        },
        "moduleNameMapper": {
            "^@/(.*)$": "<rootDir>/src/$1"
        },
        "snapshotSerializers": [
            "jest-serializer-vue"
        ],
        "testMatch": [
            "**/tests/unit/**/*.test.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
        ],
        "collectCoverageFrom": [
            "**/src/**"
        ],
        "testURL": "http://localhost/",
        "transformIgnorePatterns": [
            "node_modules/(?!vue-spinner|vue-quill-editor)"
        ]
    }

除了这个 hacky 解决方案之外，还有更优雅的方法来实现这一点吗？

非常感谢！

标签： vue.jsjestjswebstormcode-coveragevue-test-utils

vue.js - 忽略 VueJS 组件文件的代码覆盖率，尽管这些组件的测试已成功运行

问题描述

解决方案

推荐阅读