RailsのVue.jsをWebpackerとJestでテストする(翻訳)

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Testing Vue.js in Rails with Webpacker and Jest 原文公開日: 2018/01/16 著者: Mario Saul RailsのVue.jsをWebpackerとJestでテストする(翻訳) 今やっているプロジェクトで、既存のRailsアプリにVue.jsを統合する方法の調査をを命じられました。とりあえず公式ガイドを読み、チュートリアルを視聴し、ブログを読みまくった結果、Vueコンポーネントを完全に動かせるようになりました。 最後の段階でいくつかテストを書こうとしましたが、残念なことにWebpacker gemにはテスト向け設定が含まれていなかったので、自分で設定せざるを得ませんでした。 驚いたことに、満足な設定方法がドキュメントに見当たらなかったのです。そこで私が何とかこれを動かせるようにしたときの方法を本記事で皆様と共有したいと考えました。 1. Jestのインストール 特にこれといった好みもなかったので、Jestを使うことに決めました。vue-cliも同梱されていたので使いました。 Jestのインストールで必要なのは、プロジェクトのルートディレクトリでyarn add –dev jestを実行することだけです。続いて、package.jsonに自分のテストスクリプトを追加します。 { “scripts”: { “test”: “jest”, … }, … } これで、yarn testを実行すればテストが走ります。 2. テストの置き場所を定義する この時点でyarn testを実行しようとすると、config/webpack/test.jsでコケます。これは、Jestがプロジェクト内のテストファイルを探索する方法が原因です。基本的にはプロジェクト全体のうち.spec.jsか.test.jsにマッチするすべてのファイルを実行します。ここではテストファイルが*.test.jsとマッチしたので、テストとして実行されようとしていたのです。 自分たちのテストを実行する基準を満たすプロジェクト内の他のファイルと同様、Webpack configファイルを使わないようにしたいので、探索するファイルの場所をJestに指定する必要があります。 ここではRspecを使っていることもあり、spec/javascriptsディレクトリを探索場所として指定することにしました。もちろん、自分のプロジェクトに合う場所を自由に指定することもできます。 これを行うには、package.jsonファイルにrootsを追加しなければなりません。 “jest”: { “roots”: [ “spec/javascript” ] }, package.jsonのサイズがかなり大きいのでこのファイルにこれ以上設定を追加したくない場合は、–config … Continue reading RailsのVue.jsをWebpackerとJestでテストする(翻訳)