Vue.jsとVuexとユニットテスト

どこもかしこも混雑していることがわかっているので、連休前半は家からほとんど出ることがありませんでした。

早速本題。

component内のボタンがクリックされたらstateが変更される、けどstateが変更されるだけで描画には影響がない、といった場合にはテストをどう書けばいいのでしょうか。いろいろと試したところ、なんとなくまとまってきたので整理してみます。

ここでテストする必要があるものは、簡単に分けてみると以下の2つになるのではないかと思います。

  • ボタンをクリックするとmethod(もしくはaction)が呼ばれる
  • stateが変更される

まずは後者ですが、Vuexにおいてstateを変更するにはmutationをcommitするしかないので、mutationのテストとしてしまえばいいはず。さっそく書いてみます。mochaをフレームワークに、アサーションにはchaiを使っています。

import { mutations } from 'mutations'
import * as types from 'mutation-types'

describe('test for mutations', () => {
  it('do CHANGE_STATE', () => {
    const state = {
      hogepiyo: {}
    }

    const hogepiyoData = {
      hoge: 'hogehoge',
      piyo: 'piyopiyo'
    }

    mutations[types.CHANGE_STATE](state, hogepiyoData)

    assert.strictEqual(state.hogepiyo, hogepiyoData)
  })
})

残ったほうについては、componentをマウントしてクリックイベントを発火させればテストできそう。method内の処理は見る必要がないので、sinonを使ってスタブにしておきます。

import Vuex from 'vuex'
import { shallow, createLocalVue } from '@vue/test-utils'

import { state } from 'state'
import App from 'App.vue'

const localVue = createLocalVue()
localVue.use(Vuex)

describe('test for App.vue', () => {
  let store

  beforeEach(() => {
    store = new Vuex.Store({
      state
    })
  })

  it('call submit', () => {
    const wrapper = shallow(App, { store, localVue })
    const clickMethodStub = sinon.stub()

    wrapper.setMethods({ submit: clickMethodStub })
    wrapper.find('.btn-submit').trigger('click')

    assert.strictEqual(clickMethodStub.called, true)
  })
})

こんなものでしょうか。今回の場合、mutationのテストはさて置き、componentのテストは不要な気もします。どこまでテストするのか、は個々人の好みによるところもあるのでなんとも言えませんが。

Babel7事始め

最近のBebelがよくわかりません、という人向けに書いてみます。

7系

現時点で7系はBeta版となっています。公式Docは6系について書かれているので、7系を使ってみたい人には何の参考にもなりません。というか、インストールするパッケージ名がそもそも違います。 7系では以下のパッケージとプリセットから始めることになります。

  • @babel/core
  • @babel/preset-env

scoped packages

見慣れない命名規則に一部の人は面食らうと思いますが、見慣れないだけで標準仕様です。 プリフィックスの @名前空間のようなものです。その名前空間/ 下にパッケージ名やプラグイン名を付けるというような感じです。

  • babel-cli -> @babel/cli
  • babel-core -> @babel/core
  • babel-preset-env -> @babel/preset-env

es20xx

かつて大正義だったプラグインのbabel-preset-es20xxは非推奨となりました。yarn add babel-preset-es2015 babel-preset-es2016 などという鬱陶しい作業は不要になったのです。代わりにbabel-preset-envを使いましょう。preset-envの使い方は多く出回っているので省略しますが、必要なときだけpolyfillを追加してくれるという超便利オプション 'useBuiltins': 'usage' は、以下のQiita記事が参考になります。

babel-preset-env 2.0のuseBuiltInsを使ってpolyfillする - Qiita

ECMAScript Proposal Stages

プラグインはbabel-preset-stage-xでまとめて導入するのが楽です。が、使いもしないプラグインを読み込むのは無駄だし、管理という面から見ても微妙です。これからは必要なプラグインのみをインストールするようにしましょう。なお、object-rest-spreadなど、よく使うであろうプラグインはpreset-envに含まれているので要注意です。

その他

提案段階にあるプラグイン命名規則が変更になって、他と差別化されて一目でわかるようになりました。また、es2015といった不要な年表記はなくなりました。スッキリですね。

  • babel-plugin-transform-class-properties -> @babel/plugin-proposal-class-properties
  • babel-plugin-transform-es2015-classes -> @babel/plugin-transform-classes

Webpackを使う場合は、babel-loaderも7系に対応したものを使います。

  • babel-loader@8.0.0-beta.0

地味に嬉しい点として、babelrcが .babelrc.js といった感じにjsで書けます。いろいろ弄れるようになるので捗りますね。

詳細仕様は公式で確認を。公式は正義なり。

意識低い系エンジニアのこと、時々でいいから思い出してください

冷え切った空気が鼻の穴を抜けていく感覚に少し懐かしさを覚え、寒さのギアが1段階上がったことを知る今日此の頃です。こんにちは、こんばんは、私です。

世間はAdvent Calendar一色で、多種多様な技術エントリがはてブを賑わせています。投稿している人的には、「他のエンジニアの役に立ってほしいな」とか「ドヤ顔で技術力を晒したいな」とか「アウトプットして自身のスキルアップにも繋げていきたいな」とか、いろいろな想いがあるのだろうと思います。どれもとても素晴らしいです、格好良いです。

そんな素晴らしいエントリに日々勝手に苦しんでいるのが私です。眩しいんです、眩しすぎるんです。エンジニアとして輝き続けようというその想いが見え隠れして、眩しいんです。そこで気付きました。プログラミングが、エンジニアの仕事内容が、私はそこまで好きではなかったのだなと気付きました。今は良くても、これからもずっとエンジニアとして働き続けたいわけではないのだろうなと。

たぶんそれは時間が必要だからです。スペシャリストとしてエッジの効いたエンジニアになるためには、常日頃からスキルアップのための努力が必要で、それには同時に多くの時間も必要になります。時間は捻出するものなので、作ろうと思えば作れます。でも仮に作ったとしても、スキルアップに費やす時間はほとんど残っていませんでした。

それというのも、私には他にやりたいことがあったからです。

  • 深夜アニメを観て作画や演出に心躍らせたい
  • 青春群像劇を描いたアニメや漫画にもっと出会いたい
  • 『時計仕掛けのオレンジ』をもう一度観たり、イーストウッド是枝裕和の作品をこの先も観てみたい
  • モームの『月と六ペンス』を読みながらゴーギャンの絵画を鑑賞したい
  • オーウェルとかカフカとかサリンジャーの本も全部読んでみたい
  • 岩波文庫青本で片っ端から教養を学びたい
  • ウォーラステインの世界システム論をもっと理解したい
  • 学術文庫や新書の歴史書も読みたい
  • 趣味のジョギングをもっと続けてフルマラソンやトライアスロンに出場したい
  • 海外に出ていろんな人と出会ったみたい

やりたいことがありすぎました。たくさんの趣味を楽しみつつ、仕事も目一杯しつつ、という人もいると思います。私は不器用なんです。あれもこれもなんてできないです。「それ、逃げているだけじゃん」とか「エンジニアというか、ダメリーマンだよね」とか言われたら何も言い返せないです。その通りだもの。

そんな感じでエンジニアしている人、他にどれくらいいるのかな、いないのかな、みんな一生エンジニアしていきたいのかな。話を聞いてみたいものです。