vuejsのテストに関する情報
Kohei Sugiこれが圧倒的に参考になりそう。
Kohei SugiVuex のテストに関する情報
Unit testing a Vuex store : Vue Fes Japan 2018
Vue Fes Japan 2018に @EddYerburgh (vueのコアメンバー、vue-test-utiliの作者)が vuex のテストについて講演している。
vuex と jest を組み合わせたテスト方法二つ(関数的にテストする方法とインスタンスに対してテストする方法)について述べられている。
非常に有益なのにTwitter上ではあまり話題になっていない？？これ絶対見た方がいいよって気がする。
Testing Vuex in components (Vue test utils のguide)
Testing (Vuex の guide)
こちらは Vuexのguideのテストの情報。こちらは参考にしない方がいいのでは、という気がする。。。
Vue Testing Handbook の Vuexが絡む部分
冒頭でも紹介している vue testing handbookのtesting vuexが絡む項目。
vuex-in-componentsなんかの項目はより実践的なコードな気がするので、これからちゃんと読む。
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発 のP.142-P.145
Kohei Sugiどこまでテストを書くか？
どこまでテストを書くか？
筆者はユニットテストについてVuexデータストアと、挙動が複雑なVueコンポーネント、そしてフレームワークに依存しないレイヤーのコードに絞ってテストを書くべき
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発 のP.137
わかる。上記を必須とした上で、執筆時よりもブラウザテスト環境が進歩したので、それについても書きたいので、調べる。
Kohei SugiVuex のディレクトリ構造について参考になりそうなもの
Kohei Sugiテスト関係ないやん
Kohei Sugicypress関係
公式ドキュメントが異常に充実してる。
逆に他にインデックスになる情報は少ないかもしれない。
デフォルトでインストールされる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 & という方法しかないのかな？
まぁ別にいいんだけど、
その他
日本語系の情報は非常に少ない気がしたけれど、そんなことないかなぁ。
このスクラップを作った時に先にメモしておいたリンク。
ググってる中でほとんど日本語の情報に当たらなかったけれど、ググり方が悪かったのかもしれない。
Kohei SugiComponentのテストについて
jestの .toMatchSnapshot でとりあえず雑にテストを始める。
ロジックを伴ってるcomponentだけで良い。そもそもロジックは別の場所に切り出したい。
Kohei Sugiその他雑に読んだ記事もまとめておく
NuxtアプリケーションをJestでテストする
NuxtアプリケーションをJestでテストする | アクトインディ開発者ブログ
ブログ自体は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 のテストまとめ
Testing Actions / Vuex の actions を Jest を使ってテストする
【Nuxt.js】JestでTDDを実践してみる
Kohei Sugitodo
mapActions / mapStates / mapMustations で依存を解決した store の結合テストがうまくいかなくて、無理矢理モックした。
Kohei Sugi最近、全くvueやってないのcloseする。(全くは嘘かも)