メドピア開発者ブログスマートフォン用の表示で見るメドピア開発者ブログ集合知により医療を再発明しようと邁進しているヘルステックリーディングカンパニーのエンジニアブログです。Tumblr涙の数だけ強くなるフロントエンドエンジニア村上(@pipopotamasu)です。熱海に行ってきたので、そこで作ったVue.jsのテストライブラリ「vue-function-tester」を紹介したいと思います。github.comatamivue-function-testerとはvue-function-testerは、Vue.jsの「メソッドの単体テストライブラリ」として作りました。watchをテストするためのライブラリです。started長々と解説するよりは実際のコードをみて行きましょう。テスト対象のコンポーネントとして、簡単な検索ボックスのサンプルコードを用意しました。jest依存ライブラリなのでjestのテストコードになります。余談ですがメドピアのフロントエンドはjestでバシバシテストコードが書かれています。});});上記のようにsearchメソッドに対するテストを書くことができます。hooksやcomputedのテストに関しては以下をご覧ください。https://github.com/pipopotamasu/vue-function-tester#computedvue-function-testerを作った背景ただなんとなく作りたかっただけです。深い理由はありません。(上記だとブログの長さ的に寂しくなりすぎるので、理由を無理やり捻り出しました。)vue-function-testerを使わなくてもVueコンポーネントのメソッドのテストを書くことは可能です。...vue-test-utilsを使用するメソッド内の処理を別の関数として切り出してそちらをテストするVueオブジェクトもしくはVueコンストラクタからメソッドの参照を取り出しテストするざっと考えついただけ3つの方法がありますが、どれも良い面もあればそうでない面もあり、個人的にときめくものではありませんでした。vue-test-utils皆さんご存知の通り、既存のVue.jsのテストライブラリとして「vue-test-utils」という有名なライブラリがあります。便利なライブラリで私ももちろん愛用させてもらっています。これは「Vueコンポーネント」のテストにフォーカスしたライブラリです。常日頃開発している身としては、「Vueコンポーネントのメソッド」にフォーカスしてテストを書きたい時にちょくちょく出くわします。その場合、vue-test-utilsだとテストコードが冗長になってしまうことがあります。hooks用の設定etc...等々、Vueコンポーネントのメソッドテストをときめく感じに書きたいという欲を満たすことができませんでした。VueオブジェクトもしくはVueコンストラクタからメソッドの参照を取り出しテストする上記のサンプルコードを例にすると以下のような感じになります。});});テスト自体は普通に書けるのですが、若干冗長さを感じてしまいます。上記のコードで冗長と感じるのは以下の2点です。thisのcontextを別変数で宣言->メソッド実行->context変数の検証と、3ステップ踏まないといけない。$emitのモック作成。methodsやcomputedのsetterのテストを書いているとそこそこの頻度で$emitが出てくるのに毎回モックするのが面倒。Vueコンポーネントのメソッドにフォーカスするという部分では問題ないのですが、上記の点でときめかない点が残りました。メソッド内の処理を別の関数として切り出してそちらをテストするそもそも別関数として切り出すというやり方です。関数のインターフェースをcontextベース(this)ではなく、引数・返り値ベースでinput/outputを実装すればとてもテストしやすい関数になります。}});簡単すぎる例ですが、上記のsum関数なら容易にテストできます。ロジックが長くなってくると、Vueコンポーネントのメソッドとして定義しておくとコンポーネント全体の視認性が悪化するので上記のような分割はとても良い手段です。そもそも切り出すのがめんどくさいですし、切り出した関数のテストが正でも対象のVueコンポーネントのメソッドが正常に動くとは限りません。こちらの手段も若干ときめかない部分が残りました。vue-function-testerのときめくポイントではどうすればときめくのか、それはコードを短く書くことではないかと自問自答し、以下のコードを短くするときめきポイントを実装しました。メソッドチェーン以下のようにメソッドチェーンで繋げることで、ワンライナーで検証できるようにしました。aliasさらにaliasを貼り文字数を削減。}).$emit).toBeCalledWith("search","test");終わりにこのようにメドピアの開発合宿では自作のライブラリを作ったり、他のOSSにPRを送ったり、使ったことのない技術を使って何かしらのサービスを作ってみたり等々、参加者それぞれが自由に課題を設定しコードを書きます(年2回、水木金の2泊3日)。՞)☝︎是非読者になってくださいメドピアでは一緒に働く仲間を募集しています。chromeへ移行する時に気をつけることこんにちは。メドピアのRuby(Rails)化をお手伝いしている@willn...2017-10-30Webpackerへの移行を機にフロントエンド開発を改善こんにちは。メドピアでエンジニアをしている村上(pipopotamasu...2017-05-23【初心者向け】レビュワーをイライラさせるRSpec集と解決方法こんにちは。メドピアにjoinして3ヶ月目の保立です。月別アーカイブリンク医師専用サイト「MedPeer」エンジニア採用はこちら!スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。