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