LoginSignup
1
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-02-24

概要

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

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

image.png
図: カバレッジに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ファイルのカバレッジが取れていることを確認できます。

image.png

参考情報

各種バージョン

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"
        }
    }
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1