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('操作') }) })