Posted at

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

More than 1 year has passed since last update.

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:


({"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 での開発を始められます。