jestでvueファイルのカバレッジが収集されない問題への対処

2489 ワード
Vue.js Jest Vue.js テキストリンク

概要

最近になって Codecov というサービスを知ってテストのカバレッジに気を使うようになったのですが、Jestを使って*.vueのカバレッジを取ろうとしても無視されるような動作に悩まされていました。
(おそらくはv25など特定のバージョンに起因する問題)

2020年2月時点の話で、直近のアップデートで改善されると思われるものの
メモしておきます。


図: カバレッジにjsファイルは表示されても、vueファイルがカウントされない

TL;DR

vue-jestのIssue#217のコメントを参考に、以下を行いyarn test を再実行したところ、カバレッジが収集されることを確認しました。

(1). パッケージのインストール

yarn add -D @vue/cli-plugin-unit-jest @vue/cli-service

(2). package.json(scriptsセクション)の編集
(自分のプロジェクトはLaravelが生成したpackage.jsonで、VueCLIを使用していなかったため)

# 変更前
"test": "jest",

# 変更後
"test": "vue-cli-service test:unit",

(3). yarn test を再実行して確認
今度はvueファイルのカバレッジが取れていることを確認できます。

参考情報

各種バージョン

jest: 25.1.0
vue-jest: 3.0.5

この事象発生時のJestの設定

    "jest": {
        "globals": {
            "Vue": true
        },
        "moduleFileExtensions": [
            "js",
            "json",
            "vue"
        ],
        "collectCoverage": true,
        "collectCoverageFrom": [
            "<rootDir>/resources/js/**/*.{js,vue}",
            "!**/node_modules/**",
            "!**/vendor/**"
        ],
        "setupFiles": [
            "./tests/js/setup.js"
        ],
        "transform": {
            "^.+\\.js$": "babel-jest",
            "^.+\\.vue$": "vue-jest"
        },
        "moduleNameMapper": {
            "^@/(.*)$": "<rootDir>/resources/js/$1"
        }
    }