RailsのVue.jsをWebpackerとJestでテストする(翻訳)|TechRacho(テックラッチョ)〜エンジニアの「?」を「!」に〜|BPS株式会社エンジニアの「?」を「!」に。原著者の許諾を得て翻訳・公開いたします。SaulRailsのVue.jsをWebpackerとJestでテストする(翻訳)今やっているプロジェクトで、既存のRailsアプリにVue.jsを統合する方法の調査をを命じられました。公式ガイドを読み、チュートリアルを視聴し、ブログを読みまくった結果、Vueコンポーネントを完全に動かせるようになりました。gemにはテスト向け設定が含まれていなかったので、自分で設定せざるを得ませんでした。驚いたことに、満足な設定方法がドキュメントに見当たらなかったのです。そこで私が何とかこれを動かせるようにしたときの方法を本記事で皆様と共有したいと考えました。Jestのインストール特にこれといった好みもなかったので、Jestを使うことに決めました。vue-cliも同梱されていたので使いました。jestを実行することだけです。続いて、package.jsonに自分のテストスクリプトを追加します。testを実行すればテストが走ります。testを実行しようとすると、config/webpack/test.jsでコケます。これは、Jestがプロジェクト内のテストファイルを探索する方法が原因です。基本的にはプロジェクト全体のうち.spec.jsか.test.jsにマッチするすべてのファイルを実行します。ここではテストファイルが*.test.jsとマッチしたので、テストとして実行されようとしていたのです。configファイルを使わないようにしたいので、探索するファイルの場所をJestに指定する必要があります。ここではRspecを使っていることもあり、spec/javascriptsディレクトリを探索場所として指定することにしました。自分のプロジェクトに合う場所を自由に指定することもできます。これを行うには、package.jsonファイルにrootsを追加しなければなりません。<path/to/js|json>オプションでJest設定を定義できます。この方法にする場合、package.jsonは次のような感じになるはずです。}これが動作することを確認するために、以下のようなシンプルなテストをspec/javascript/team.spec.jsファイルを作成してもよいでしょう。testを実行すれば、greenの「PASS」が表示され、動作していることがわかるはずです。babelをrescueする最初のテストが動くようになったので、一歩進めてVueコンポーネントをテストしてみましょう。最初にやってみるのは、たいていspec/javascript/の下にファイルを作成してmy_component.spec.jsのような名前を付けることでしょう。続いて次のようにimportステートメントで自分のコンポーネントをspecにインポートしてみましょう。testでテストを実行してみてください。importエラーが出力されます。6の一部である点です。Babelなどのトランスパイラの助けが必要になるということです。babel-preset-es2015で2つのパッケージをインストールし、.babelrcファイルにes2015プリセットを追加する必要があります。...さらに一歩進めてみたい方は、moduleDirectoriesをpackage.jsonに追加すると、モジュールへのフルパスを入力しなくても済むようになります。]}これで、先ほどのパスを簡単にできます。'../../app/javascript/my_component.vue';上のパスは以下のように書けます。testでテストを実行するとまたしてもSyntaxErrorが表示されます。これは、コンポーネントのimportは成功したものの、.vueファイルフォーマットを理解できていないためです。この辺りの面倒を見てくれるvue-jestを使えます。vue-jestを実行してvue-jestをインストールし、READMEの指示に沿ってmoduleFileExtensions、transform、mapCoverageを追加します。追加後のpackage.jsonは次のような感じになるはずです。true}moduleFileExtensionsを使うと、単一のファイルコンポーネントのimportで.vue拡張子が不要になります。'my_component.vue';上のパスは、以下のように書き換えられます。'my_component';.これで、importをシームレスに使えるようになりました。transformセクションに記述されたルールでは、テストするファイルの変換を担当するパッケージを指定します。ここではすべての.vueファイルの扱いをvue-jestに任せたいので、これらのファイルはJestで扱われる前に純粋なJavaScriptに変換されます。mapCoverageは、トランスフォーマーが生成するソースマップを使うために設定してあります。Jestはこのソースマップを用いて、カバレッジの試行や、レポート生成時や閾値チェック中に元のソースコードとのマッピングを行います。最後に、Vue.js公式の単体テストユーティリティライブラリであるvue-test-utilsを追加しましょう。@vue/test-utilsを実行するだけですぐ使えるようになります。Vueコンポーネントのテストを書けるようになりました?。JestなどWeb上の多数のドキュメントから集めた情報を元に執筆いたしました。コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。チュートリアル第2版の監修および半分程度を翻訳、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れて更新翻訳中。enno.jpを運営。実は最近Go言語が好きで、Goで書かれたRubyライクなGoby言語のメンテナーでもある。仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。Storageを使ってはいけない(翻訳)#Tags#会社紹介#自社サービス#勉強会#Rails#PHP#デザイン#実績#週刊RailsウオッチCONTACTお気軽にご相談ください。(翻訳)CONTACTTechRachoでは、パートナーシップをご検討いただける方からのご連絡をお待ちしております。お気軽にご意見・ご相談ください。