プログラムVue.jsでわりといろいろつくっている今日このごろ。使ってるのに、未だにEsLintもいれてないし、テストコードも書いてないという状況に危機感を覚えた。テストコード書いてないのはまずい気がする。ブラウザで毎回確認するのも時間かかるしね。10カ月ほど前に、以下のLaracastのVueTestingをさっと見たんだけれども、あんまり生かせてない。Laracastの有料講座を見るために毎月1000円ぐらい払ってる気がする。有効に使えてなくて悔しいので、今一度学びなおしてみる。いっても下記の動画は無料でみれる。laracasts.comエピソード1の内容はわずか11分なんだけれども、メモを(無駄に)取りながら書いたらやけに長くなった。書いといてあれだけれども気になる方は、動画を見たほうが絶対いい。単一ファイルコンポーネントをテストするwatchオプション作業の記録はGithubにあげています。github.com最低限のかんきょうづくり講座に沿って、メモをしていくことにする。講座では、VueCLI等は使ってなかったので、それに倣い、一からVueを導入する。vue次にテストツールを導入する。Webpackというテストランナーをインストールする。testをしたときに、Webpackのコンパイルのみ行われて、テストが走らないという事象が起こります。webpack4を使う場合は、以下のバージョンを使用する必要がありました。--save-devvue-test-utilsだけで済むかと思ったんだけども、javascriptのコードを実行するのはvue-test-utilsではなくテストランナーと呼ばれるもので、いくつか種類があるとのこと。vue-test-utilsとテストランナーの役割分担がちょっとイメージできない。mochaはwebpackでコンパイルしてコンパイルしたものをmochaで実行するっぽいもの。src/componentsディレクトリと、testディレクトリを作って、空っぽのファイルをそれぞれおいておきます。specifiedですが、テストなんかねえよ!と怒られます。testの箇所を実行していますね。こちらをみると、先ほどのエラーが記載されていることがわかります。},ですので、こちらを変更していきます。},mocha-webpackはwebpackでコンパイルするので、wepackのconfigファイルを指定しています。実行するテストコードを指定しています。空っぽのwebpack.config.jsをプロジェクトのルートディレクトリ配下につくっときます。webpack.config.jsまた、webpack4から、mode'オプションの指定をしとかないとWarningがでてしまうので、webpack.config.js`に記載しとくことにします。'development'}また、webpackが必要なのでこちらもインストールします。webpack準備ができたら、再度実行します。pasingといわれていますが、なんとなく動いたみたいです!コードを書く先に講座ででてきたコード全体を記載することにします。})})コードの細かい部分はさっぱりですが、Counterのプロパティっぽいcountの値が0だったらOK!っていってるのはわかるかと思います。次に具体的な中身を見ていきたいと思います。mount(Counter)の部分。公式ガイドによれば、mountはVueコンポーネントをマウントしてラップしたものを返し、ラッパーのvmプロパティにアクセスすることでVueインスタンスにアクセスできるようなことが書いてある。このへんの理解がいまいちわからないけれども、コンポーネント渡してあげればそれを作って返してくれるぐらいの理解でいいのかな。今回だと、コンポーネントではなく、ただのモジュールでちょっと不思議だけれども進める。次にexpectの部分。これは、PHPUnitとかにもあったアサーションの部分。メソッド名から何を期待しているのかはなんとなく想像ができると思う。アサーションの部分も別のライブラリとのことで、講座ではexpectを導入していた。--save-devちなみに、expectのgithubをみると、jestと呼ばれる別のライブラリに移行するような記載があったので、今後はそっちを使うほうがいいのかもしれない。講座の通りexpectのままでいく。github.comそれ以外に、describeとかitとか気になるけど、これがmochaの関数みたい。この辺については、書きながら学んでいくことにする。次に、コードは直接でていないけど必要なライブラリ達。vue-template-compilerは、Vueのテンプレートをプリコンパイルしてくれるもの。Vue.jsってブラウザで描画するときにテンプレートをコンパイルしてrender関数に置き換えるものと、事前にWebpackとかでプリコンパルしてrender関数に置き換えるタイプがあるんだけれども、このvue-template-compileはプリコンパイルをしてくれるライブラリ。テストコードで単一コンポーネントとかをテストする際に、必須なのかな?あんまりよくわかってない。今回もまだ.vueのファイルはないんだけれども、いれておく必要がある。vue-template-compiler最後に、仮想ブラウザ環境を提供するライブラリをいれる。jsdom-globalこちらは公式のガイドに書いてある通り、実際のブラウザ環境で書いたコードを動かすことはできるけれども、いろんなブラウザあるから複雑だから、仮想環境で実行したほうがいいよてきなことが書いてある。ブラウザで動かさずにNode.jsで動かすとのこと。これをインストールしたらJSDOMのセットアップをしとく必要がある。どこでするかというと、テストコードを実行する前のセットアップを行う機能があるみたいなのでこちらでやる。setup.jsというファイルをプロジェクトルート配下に作成する。setup.js中身は、こんな感じ。Node.jsで動かすのでES6のimportではなく、CommonJSのrequireで書く。※この表現があってるか自信がない。setup.jsrequire('jsdom-global')()最後に、setup.jsをテストコード起動時に実行されるようにする。equalityなんかエラーがでてびっくりしますが、内容をよく見ると、期待してた値と違うんじゃ!とちゃんとテストが動いていることが確認できました!テストが通るようにする1Counter.jsを修正します。Vueインスタンスを作成するときのように`data関数'としてデータを持たせます。successfullyテストが通ったことで、ようやく、Counterコンポーネントのcountの値が最初は0であること、をテストしてたんだなぁと今更ながら気づきました。ちなみに、Counter.jsの中で、なんで'data()'みたいなのをちょろっと書くだけでいいんだろうと不思議だったのですが、コンポーネントをtemplateオプションで作成してるって考えればよいのですかね。}}上記テンプレートはrender関数に置き換える必要があって、ブラウザ側でコンパイルしなきゃいけないので、render関数を直接使うやつ書いといてあれだけど、以下の記事がわかりやすい!aloerina01.github.ioDOMのレンダリングの内容を検証する本題に戻ります。さきほどは、Counterコンポーネントのcountの初期値が0であることを検証しました。次にこういうこともできるんだよということで、Counterコンポーネントの内で描画される内容について検証します。テストコードは以下の通りです。})})例のごとく、なんにがなんだかという状態だったので、先にテストが通るようにコードを修正します。}}Counter.jsにテンプレートオプションを追加して、countの内容を描画するように修正しました。テストコードのwrapper.find('.count').html()).toContain(0)は、コメントにも書いてある通り、「Counerコンポーネント内のクラス.countのDOMノードのHTMLは0っていう文字を含んでるよね」ということをアサートしています。mountが返却する、wrapperですが、公式ガイドの通り、便利なメソッドがたくさんあります。ここでは、find()で指定したクラス名を保持するDOMノードを取得して、html()でDOMノードを文字列化しているという流れですかね。なんだかすごい!vue-test-utils.vuejs.orgイベントの結果を検証するDOMの内容を検証したら、次はイベントの内容を検証します。テストコートになります。buttonタグを持つDOMノードを取得して、そのDOMノードのイベントclickを実行するという内容になります。画面で何回もクリックしなくていいんだね!という感動があります。ちなみにひっそりと、Counterコンポーネントのmountのタイミングをテスト実行時に1回だけ読み込むパターンから、状態が残っちゃうみたいなので各テストごとに読み込むように変更しています。これも、いろんなイベントを呼びながら検証していくなら、一回だけ読むこんでおくってのもありですかね。※これ以外にもbeforEachなるものを使うと、テストステートメントごとに、初期設定を指定できるみたいなので、通常はこっちを使うのかも。wrapperを各テストで使いまわすと、↑の状態が残ったままなので、mountしなおす。})})肝心のCounter.jsはこんな感じになりました。}}これ以外にも本格的に使うには、mockの準備だったり、VueCliで運用するとどんな感じなんだろうと、気になる点がいっぱいあるので、引き続き学習していきます。単一ファイルコンポーネントをテストするテンプレートオプションでつくったコンポーネントをテストしてたけれども、実際は単一ファイルコンポーネントでやるケースがほとんど。動画のエピソード2を見れば解説しているんだけれども追記。単純に.vueの構文に置き換えます。}}</script>次にwebpackに.vueのファイルをプリコンパイルしてね、という定義を書きます。]};最後にvue-loaderをインストールします。vue-loaderこれだけで、単一ファイルコンポーネントのテストができるようになります。watchオプションこれもエピソード3で紹介されているんだけれども、ものすごく感動した。},いや、単純にファイルの変更監視をしてくれて、変更がある度にテストランナーが走るみたいなやつなんだけれども、使ってみると、テスト駆動感が半端ない。クラス名変えたいなあとか、メソッド名かえたいなってときも、変更後にちゃんと動くか確認したりするのが結構めんどうで、どうしようかななんで葛藤があるんだけれども、watchしてると、がんがんかえていこうって気持ちになる。フロントエンド...2019-01-19React.jsのテストコードWorkshopの内容まとめ(1)UdemyのReact講座に学習が完了したので、この勢いでテストコー...2019-01-022018年の振り返りあけましておめでとうございます。»プロフィール30歳からWebやらなんやらを学び始めた人のブログです。(4)検索はてなブログをはじめよう!konoemarioさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。