vuetifyのバリデーションのテスト
# 以下はうまくテストができた
Karmaのテストコードでawaitが使えない
babelの設定を見直していたけど、よくよく考えたら
Webアプリのソース(vue)でawaitを使っているわけではなくて
テストコードの中で使っている。
Webアプリのソースはトランスパイル対象で、テストコードは
トランスパイルの対象ではないのかな？（全然わかっていない）
もしかしたらnodeのバージョンをあげれば解決するのでは
と思いバージョンを調べると
tachimitetsuya-no-MacBook-Air:~ dokechin$ node --version v6.11.4
awaitが使えないバージョンのようでした。
やっぱり使えないと思いきや・・・
テストコードの方が間違っていた asyncブロックの中でawaitは使わないといけないのか！！
it('adds a new shop', () => { // bad it('adds a new shop', async () => { // good
vue-test-utils＋バリデーション
テキストフィールドに値を入れると、バリデーションが実行されて、formValidがtrueになるテスト
を描いて見たが・・trueにならない
const input = wrapper.find('input#name') input.element.value = 'AEON' input.trigger('input') expect(wrapper.vm.editedItem.name).equal('AEON') expect(wrapper.vm.formValid).equal(true)
await
await flushPromises()を追加
@vue/test-utilsで非同期イベントのテスト - Qiita
npm install --save-dev flush-promises
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR Error: Module build failed: SyntaxError: await is a reserved word
あちゃ、全然わからんなぁ。
awaitを使えるようにしたい！
設定ファイルを覗いたり、ググりまくりました。
今の環境の設定.babel.rc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": [ "istanbul" ]
}
}
}stage-2というのは、awaitをサポートしていないバージョンらしい。
state-3をインストールしてあげればいい
babel stage-3のインストール
npm install --save-dev babel-preset-stage-3
.babel.rcをstage-2からstage-3へ編集
編集して、npm run unitを実行して見ましたが、依然としてawaitは使えない。
何が悪いのか？
transform-async-to-generatorのインストールも必要？
vueをテストする
インストール方法
npm install --save-dev @vue/test-utils
記述
import { shallow } from '@vue/test-utils' import Vue from 'vue' import Vuetify from 'vuetify' import Menu from '@/components/Menu' import VueI18n from 'vue-i18n' Vue.use(Vuetify) Vue.use(VueI18n) const data = require('../../../src/i18n/message.json') const i18n = new VueI18n({ locale: 'ja', messages: data }) describe('Menu.vue', () => { it('should render correct contents', () => { const wrapper = shallow(Menu, {i18n}) expect(wrapper.text()) .to.contain('割引/ポイント') expect(wrapper.text()) .to.contain('軽快な操作性') expect(wrapper.text()) .to.contain('PWA') }) })
Vue.js + Reactもくもく会@東銀座#25に参加しました
medpeer.connpass.com
初参加、胡蝶蘭が綺麗と思ったら引っ越ししたてだったと思い出す。
柔らかな雰囲気の黙々会となりました。react陣が多めでした。
課題
書こうと思ってもなかなか手がつけられていないテスト。
拙作Gratan - Unit Price Memo Toolの単体テストを書くことを課題としました
vuetify.jsを使ったvueのテストは素のままエラーとなる
test/unit/index.jsにimport文を追加する
vuetifyのimportよりも前に書きましょう！
import 'babel-polyfill'
package.jsonに追記
"babel-polyfill": "^6.26.0"
vuexやi18nを使うコンポーネントは,普通にアプリで使っているように記述する
Constructorの引数にvex,i18nのインスタンスを渡すのが肝心。
Shop.spec.js
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 Constructor = Vue.extend(Shop)
const vm = new Constructor({i18n, store}).$mount()
console.log(vm.$el.textContent)
expect(vm.$el.textContent)
.to.contain('検索')
expect(vm.$el.textContent)
.to.contain('名前')
expect(vm.$el.textContent)
.to.contain('税')
expect(vm.$el.textContent)
.to.contain('操作')
})
})
