Vue / Vuetify / Jest での開発環境構築

vue cli はバージョン3.0.1 です。
簡単なメモとして書こうと思っていたのですが、Jest のテストがいきなりコケるという試練にあいまして、結構長いことハマりましたので、その点も書いておきます。

それさえなければ、とても簡単です。

vue プロジェクトの作成

vue create my-app

Manually を選択すると、後ほどの Jest プラグインのインストールも、質問に答えていくだけで設定できますし、Vuex や VueRouter も同時に導入できたりします。
ここでは簡単に default を選択しました。

? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features

vuetify のインストール

非常に簡単です。

cd my-app
vue add vuetify

ここで、スケルトンアプリを表示できます。すでに Material テーマのアプリができています。

yarn serve

jest プラグインのインストール

vue add @vue/unit-jest

これも簡単です。純正プラグインのリストは
vue-cli/packages/@vue at dev · vuejs/vue-cli · GitHub
にありまして、そこの下に cli-plugin-<hoge> とならんでるものがプラグインで、<hoge> のところを指定するとインストールできるんですね。

テスト実行

yarn test:unit

さっそくテストを実行してみます。サンプルのテストケースが書かれているので、グリーンがでるはずです。
でも、コケる

yarn test:unit v0.23.4
$ vue-cli-service test:unit
 FAIL  tests/unit/example.spec.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/sunvisor/myProjects/my-app/tests/unit/example.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount } from '@vue/test-utils';
                                                                                                    ^

    SyntaxError: Unexpected token {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        5.055s

これは vue-cli のバージョンアップとかででなくなるかもしれません。
どうも、過去何度も出ているみたいなんですよね。
npm の cache をクリアしたり、nodo-modules 削除して yarn install やり直したり、いろいろやっても通らなかったんですが、次の issue に当たりまして、

Default unit tests are failing · Issue #1879 · vuejs/vue-cli · GitHub

I had the same issue with version 23.0.1 and I solved it using version 23.4.0.

その記述を参考にして、次を実行したら通るようになりました。

yarn upgrade babel-jest@23.4.0

ちなみに vue create した直後のバージョンは 23.0.1 でした。

これで最初のテストも通り、めでたく Vue + Vuetify での開発を始められます。