Question

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

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

<template>
   ...
</template>

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

它将起作用，并且将在IDE中显示100% lines covered。

如果我删除了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)"
        ]
    }

除了这种骇人听闻的解决方案之外，还有其他更优雅的方法来实现这一目标吗？

非常感谢！

Answer 1

此问题的跟踪记录为WEB-38769，请投票以将其通知任何进展情况

代码覆盖率忽略了VueJS组件文件，尽管已针对这些组件成功运行了测试

1 个答案: