Vue-CLIで複数テストフォルダをまとめて実施対象にする


概要

Vue-CLIのテストコード格納フォルダを次の2つに分けてる際に、これをまとめてテストする方法。
と言う、極ニッチな要求にこたえるメモ

  • tests/unit
  • tests/utils

通常の「"test:unit": "vue-cli-service test:unit"」指定だと、tests/unit だけがテスト実行対象になる。
"tests/utils" の方は、Vueファイルじゃなくてjsファイルのみをテストするケースを格納している。

なお、公式を見れば答えは載っている。
https://cli.vuejs.org/core-plugins/unit-mocha.html#injected-commands
https://sysgears.github.io/mochapack/docs/installation/cli-usage.html

解決方法

次のようにすればよい。

"test:all": "vue-cli-service test:unit tests/**/*.spec.js"

これで、testsフォルダ配下が全部テスト実行の対象になる。

なお私は、あえて分けて実行したいときがあるので、次のように設定してる。

package.json
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:mocha-no-vue": "cross-env NODE_ENV=test mocha --require @babel/register --recursive tests/utils/*spec.js",
    "test:mocha": "npm run test:mocha-no-vue",
    "test:all": "vue-cli-service test:unit tests/**/*.spec.js",
    "lint": "vue-cli-service lint"
  },

オマケ

Vue-CLIで、Vueファイルを除いてjsファイルのみをテストしたいときは、VueコンパイルせずにBabelコンパイルのみ実施してMochaると早い。

"test:mocha-no-vue": "cross-env NODE_ENV=test mocha --require @babel/register --recursive tests/utils/*spec.js"

Vue-CLIに対して追加すべきパッケージは以下。

npm install cross-env @babel/register --save-dev

ルートに置く、Babelコンパイル用の設定ファイルは次のようにする。

babel.config.js
module.exports = (api) => {
    return {
        presets: api.env('test') ? [
            [
                '@babel/preset-env', 
                {
                "targets": 
                    {
                        "node": "current"
                    }
                }
            ]
        ] : [
            '@vue/app'
        ]
    }
}