色々やったのですが、とにかくフロントエンドのテストを頑張った一週間でした。
フロントエンドはまだまだ経験が浅く、テストの書き方に関しては一から調べながらだったのでモックの設定にかなり苦戦しました。
なんとか形になってきたので、自分でブログに書いたりチームのNotionに調査で分かったことなどをできるだけ書いておくようにしたいと思います。
今週学んだこと
Vitestについて
現場でnuxt-vitest というテストフレームワークを使っているのですが、あまり情報がなくてサンプルコードを探すのに苦労しました。
nuxt-vitestのREADMEに「A vitest environment for testing code that needs a Nuxt runtime environment」とあるように、vitestというテストフレームワークをNuxt用に拡張したのがnuxt-vitestのようなので、vitestのドキュメントにある実装サンプルは応用できそうな印象でした。
ただ、HTTP通信をモックするコードがなかなか上手くいかず、直接引用できそうなサンプルコードもvitestのドキュメントで見つからなかったので困っていました。
そこで一旦Vueのドキュメントのテストのページを読むと以下の記述がありました。
Vitest はヘッドレスでレンダリングするコンポーネントやコンポーザブルのためのライブラリーです（例: VueUse の useFavicon 関数など）。コンポーネントと DOM は @vue/test-utils を使うことでテストできます。
正直書かれている内容はあまり理解できませんでしたが、少なくともvue/test-utilsのドキュメントも調べてみる価値はありそうと感じました。
そして最終的に、vue/test-utilsのMaking HTTP Requestsのコードが完全に自分が書きたかったテストと一致していました。
ドキュメントにあるコードは以下のようになっています。
import { mount, flushPromises } from '@vue/test-utils'
import axios from 'axios'
import PostList from './PostList.vue'
const mockPostList = [
{ id: 1, title: 'title1' },
{ id: 2, title: 'title2' }
]
// Following lines tell Jest to mock any call to `axios.get`
// and to return `mockPostList` instead
jest.spyOn(axios, 'get').mockResolvedValue(mockPostList)
test('loads posts on button click', async () => {
const wrapper = mount(PostList)
await wrapper.get('button').trigger('click')
// Let's assert that we've called axios.get the right amount of times and
// with the right parameters.
expect(axios.get).toHaveBeenCalledTimes(1)
expect(axios.get).toHaveBeenCalledWith('/api/posts')
// Wait until the DOM updates.
await flushPromises()
// Finally, we make sure we've rendered the content from the API.
const posts = wrapper.findAll('[data-test="post"]')
expect(posts).toHaveLength(2)
expect(posts[0].text()).toContain('title1')
expect(posts[1].text()).toContain('title2')
})
axios.getが返すレスポンスをモックしておき、その値がレンダリングされることを確認しています。
他にも有用な情報がドキュメントに書かれていそうなので、全体的に読んでみようと思います。
課題と対応策
課題1: フロントエンドのテストの書き方がよくわからない.
今回モックの設定でだいぶ苦戦したように、テストを書こうとすると全然わからないことだらけの状態です。
対応策1: 上手く行ったことをアウトプットしておいて再現性を高める.
今回調査した内容や考えていたことをブログや個人用のNotionなどに書いておいて、次同じような状況になった時に参照できるようにしておく。
実際に動いたテストコードをもとにサンプルコードを書いてGitHubにプッシュしておく。
来週の目標
- フロントエンドのテストでより効果的なテストケースをコードで書けるようにする
- 案件のナレッジをドキュメントにまとめる
面白かった記事など
かなり仕事が捗りそうだし、停電時の対策にもなるので2023年中にPowerHouseを買ってみようと思います。
