This post is Private. Only a writer or those who know its URL can access this post.
More than 1 year has passed since last update.

Vue-test-utilsのTipsとTDD

まぼろしのJS勉強会 #5 「型とテスト」
https://maboroshi.connpass.com/event/93959/


本日の予定

  • 1. 自己紹介 (1 min)
  • 2. Vue-test-utilsのTips (1 min)
    • OSSで管理しているやつを紹介する
  • 3. TDDをやってみた(3 min)

1. 自己紹介


1. 自己紹介 現職

株式会社オープンロジ

  • 8/1 ~
  • React と PHP/LaravelのPR4つくらい作ったけど…
  • あれ、まだVue.js書いてない…
  • VueFesでゴールドスポンサーやってます◎

1. 自己紹介 前職

ブラニュー株式会社

with miller

  • CMS(WordPress的なやつ)作ってました
  • Vue.js + Rails
  • Vue側はTDDで作ってた

1. 自己紹介 前職(2) with Miller氏

  • 私の大好きミラーくん @ lmiller1990
  • vue-test-utils 7つマージされている
  • 日本におけるVueのテストだったらまじで一番詳しいレベルだと思う。。

2. Vue-test-utilsのTips


2. Vue-test-utilsのTips

Vue.jsテストハンドブック | Vueテストハンドブック by Miller


2. Vue-test-utilsのTips 具体的な内容

// 普通の書き方
const wrapper = shallowMount(Emitter)
wrapper.emitEvent()

// 紹介している書き方
Emitter.methods.emitEvent.call({ $emit })

Vue.jsの mounted のライフサイクルフックのイベントを呼び出したくないときとか。


2. Vue-test-utilsのTips まとめ

  • Vue.jsのTest界隈盛り上がってほしいのでM氏が作ったやつ
  • 実践的なテストのリファクタリング方法とかその他Tipsについて書かれている
  • OSSなのでPR・ISSUEお待ちしていると思います。!

3. TDDをやってみた


3. TDD バスった話

【Vue.js】いつから「フロントエンド開発でTDDができない」と錯覚していた?


3. TDD or NOT-TDD Test ?

  • 前提として「テストは絶対やるべきだ」「テストは絶対にいらない」などの01論法は :cry:
  • specの話
  • vue create で作られるテストは xxxxx.spec.js
  • スペックとは仕様書

3. TDD 社内用

  • PDF生成部分の回収のときテスト駆動したかった。(phpでの単体テスト触ったことないです)
  • Shipment.phpに曜日判定のメソッドを追加するだけなのだが
  • メソッド修正するたびにブラウザで「出庫依頼を修正する」「作業指示書を確認する」の動作が必要
  • これがiTermを開いているだけで開発できる

Screenshot from 2018-08-03 12-30-51.png


3. TDD メリット

やってみての感想。

  • エラー [Vue Warn] になれて問題解決が早くなる
  • 「こういう書き方が推奨なんだ」って思ったことがある。Vueの正しい書き方が身につく?
  • 関数の返り値と戻り値とか設計を考えながら書くのできれいなコードを意識してたりします
  • ある程度までブラウザみないで済むのでとても楽かもしれない。

3. TDD デメリット

  • Unitテストが息を吸うようにかける人じゃないとTDDできないと思う

まとめ

  • TDDでVueコンポーネント開発している会社はある(前職)
  • Vue-testing-hundbookにぜひ貢献して!
  • ロジック層だけならTDD開発できるのでぜひおすすめします。結構楽しいです。
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.