vuetifyのunitテストを動かす

背景

vue-cli で作ったwebpackサンプル＋vuetifyで簡単なテストを動かそうとしているのですが、
[Vue warn]: $listeners is readonly.ワーニングが大量に出てしまう。。
なんでだろう。。

vue-test-utils？

まだベータバージョンだからかな。vue-test-utilsを捨てて、avoriazにして見たら嘘のようにエラーが消えた。

とりあえず環境は・・

うろ覚えだけど、一応書き留めておく。不足しているかもしれません。

モジュールのインストール

vuetifyをテストするには、polyfillというのが必要見たい。
あとはテストにasync,awaitを記述したいのでその辺のモジュールも必要になりました。

npm install --save-dev avoriaz
npm install --save-dev babel-plugin-transform-async-to-generator
npm install --save-dev babel-polyfill
npm install --save-dev babel-preset-stage-3

.babelrcの編集

stage-2と描いてあるところをstage-3へ(async,awaitを使うため）

index.jsの編集

testの起点のindex.jsの先頭行に以下の記載。

import 'babel-polyfill'

あとはテストを書くだけ

import { mount } from 'avoriaz'
import Vue from 'vue'
import Vuetify from 'vuetify'
import Shop from '@/components/Shop'
import VueI18n from 'vue-i18n'
import { store } from '../../../src/store/store.js'

Vue.use(Vuetify)
Vue.use(VueI18n)

const data = require('../../../src/i18n/message.json')

const i18n = new VueI18n({
  locale: 'ja',
  messages: data
})

describe('Shop.vue', () => {
  it('should render correct contents', () => {
    const wrapper = mount(Shop, {i18n, store})
 // 以下テストがつづく・・・

asyncはnode7.10.1から使える

https://node.green

これを見るとので7.10.1からasyncの機能が使えるはず。
今回はnodeのバージョン6でやろうとしていたので、トランスパイルでasync系を変換する必要があった。
結局node9.11.1にしたら必要なモジュールが減った。大分スッキリした。

npm install --save-dev avoriaz
npm install --save-dev babel-polyfill

トランスパイル周りの知識がイマイチよくわかっていないなぁ。
変換前のnode環境、変換後のnode環境。
node9.11.1はasyncを変換しなくても動くからトランスパイルが不要になるということなんだろうけど・・・