鈍足ランナーのIT日記

走るのが好きな5流のITエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

Vue.js + Reactもくもく会@東銀座#25に参加しました

medpeer.connpass.com
初参加、胡蝶蘭が綺麗と思ったら引っ越ししたてだったと思い出す。
柔らかな雰囲気の黙々会となりました。react陣が多めでした。

課題

書こうと思ってもなかなか手がつけられていないテスト。
拙作Gratan - Unit Price Memo Tool単体テストを書くことを課題としました

vuetify.jsを使ったvueのテストは素のままエラーとなる

github.com

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

ボタンを押した時のテストの書き方

scotch.io

タイムオーバー!