Open9

vuejsのテストに関する情報

Vuex のテストに関する情報

Unit testing a Vuex store : Vue Fes Japan 2018

Vue Fes Japan 2018に @EddYerburgh (vueのコアメンバー、vue-test-utiliの作者)が vuex のテストについて講演している。

vuex と jest を組み合わせたテスト方法二つ(関数的にテストする方法とインスタンスに対してテストする方法)について述べられている。
非常に有益なのにTwitter上ではあまり話題になっていない??これ絶対見た方がいいよって気がする。

https://vuefes.jp/2018/speakers/eddyerburgh/

https://www.youtube.com/watch?v=kUFZBNiK_Zc

http://slides.com/eddyerburgh/testing-a-vuex-store

Testing Vuex in components (Vue test utils のguide)

https://vue-test-utils.vuejs.org/guides/#testing-vuex-in-components

Testing (Vuex の guide)

こちらは Vuexのguideのテストの情報。こちらは参考にしない方がいいのでは、という気がする。。。

https://vuex.vuejs.org/guide/testing.html

Vue Testing Handbook の Vuexが絡む部分

冒頭でも紹介している vue testing handbookのtesting vuexが絡む項目。

https://lmiller1990.github.io/vue-testing-handbook/testing-vuex.html
https://lmiller1990.github.io/vue-testing-handbook/vuex-mutations.html
https://lmiller1990.github.io/vue-testing-handbook/vuex-actions.html
https://lmiller1990.github.io/vue-testing-handbook/vuex-getters.html
https://lmiller1990.github.io/vue-testing-handbook/vuex-in-components.html
https://lmiller1990.github.io/vue-testing-handbook/vuex-in-components-mutations-and-actions.html

vuex-in-componentsなんかの項目はより実践的なコードな気がするので、これからちゃんと読む。

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発 のP.142-P.145

https://github.com/potato4d/nuxt-beginners-guide/blob/master/packages/nuxt-testing-environment/spec/store/index.spec.js

どこまでテストを書くか?

どこまでテストを書くか?
筆者はユニットテストについてVuexデータストアと、挙動が複雑なVueコンポーネント、そしてフレームワークに依存しないレイヤーのコードに絞ってテストを書くべき
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発 のP.137

わかる。上記を必須とした上で、執筆時よりもブラウザテスト環境が進歩したので、それについても書きたいので、調べる。

cypress関係

https://docs.cypress.io

公式ドキュメントが異常に充実してる。
逆に他にインデックスになる情報は少ないかもしれない。

デフォルトでインストールされるexampleを読めば大体やるべきことはわかるのだけれど、
それに気づくまでは大変かもしれない。

prisma

自分はopenapi3でモックサーバーを立ち上げて、UIテストを実行したかったのだけれど、あまりそういう事例は見つからなかった。
prismでモックサーバーを立ち上げて、テストを実行するようにした。
factory + interceptの方が世の中的には一般的なのかもしれない。jsからtsへの移行途中とかでサーバーとクライアントのインピーダンスミスマッチがTSの型で吸収できてない場合はそういう方法になりそう。

地味に、npm scriptをbackground jobにするいい感じの方法がわからなかったので、
yarn run mock:serveしてから別ターミナルで、yarn run cypress:run ってしている。

github actionsに至っては yarn run mock:server & という方法しかないのかな?
まぁ別にいいんだけど、

その他

日本語系の情報は非常に少ない気がしたけれど、そんなことないかなぁ。
このスクラップを作った時に先にメモしておいたリンク。

https://techblog.zozo.com/entry/cypress-e2e-test-for-vuejs

ググってる中でほとんど日本語の情報に当たらなかったけれど、ググり方が悪かったのかもしれない。

Componentのテストについて

jestの .toMatchSnapshot でとりあえず雑にテストを始める。
ロジックを伴ってるcomponentだけで良い。そもそもロジックは別の場所に切り出したい。

その他雑に読んだ記事もまとめておく

NuxtアプリケーションをJestでテストする

NuxtアプリケーションをJestでテストする | アクトインディ開発者ブログ

https://tech.actindi.net/2019/07/12/083702

ブログ自体はVuexのtestに絞った情報ではないのですが、nuxtのvuex部分を lodash の cloneDeep する方法で、簡略化してます。EddYerburgh は createStoreConfig としてるのですが、めんどくさいので本番コードをからもってくるのは楽かもしれません。 (発祥はこっちかもしれないですね https://github.com/potato4d/nuxt-beginners-guide/blob/master/packages/nuxt-testing-environment/spec/store/index.spec.js#L14)
ちなみに、この方法はsotreが複数ファイルに渡るときに問題が起こるので、コードがシンプルなうちしか通用しないかもしれません(詳しい人教えてください。)

普通に読んでいけばわかりますが、このテストのやり方はEddYerburghの発表でいうCreate Instanseの方であるというのにも留意するとハマりが少ないかもしれません。

nuxtとnuxt axiosのmockの仕方が非常に参考になりました。

Vue/Vuex のテストまとめ

https://uncle-javascript.com/vue-test-digest

Testing Actions / Vuex の actions を Jest を使ってテストする

https://uncle-javascript.com/vuex-actions-test

【Nuxt.js】JestでTDDを実践してみる

https://mintaku-blog.net/jest-tdd/

todo

mapActions / mapStates / mapMustations で依存を解決した store の結合テストがうまくいかなくて、無理矢理モックした。

ログインするとコメントできます