VuexをJestでテストする

ぶるー 2021/01/16に更新

Vuexをテストする方法についてメモ
- actionsでテストする内容
  - 想定しているAPIのエンドポイントにアクセスしているか
  - APIに渡している値が正しいか
  - 想定しているmutateにコミットしているか

ぶるー 2021/01/15

actions内で非同期処理をしている場合は、itメソッドの第二引数にasyncをつける必要がある

index.spec.ts

describe('index store', () => {
  describe('actions', () => {
    it('should fetchUser', async () => {
      const commit = jest.fn();
      const $axios

      await actions.fetchUser({ commit });
    });
  });
});

ぶるー 2021/01/16

axiosを内部で使っている場合には、mockにしておく

index.spec.ts

let url = ''
let body = {}
let mockError = false

jest.mock("axios", () => ({
  post: (_url, _body) => { 
    return new Promise((resolve) => {
      if (mockError) 
        throw Error("Mock error")

      url = _url
      body = _body
      resolve(true)
    })
  }
}))

参照

Testing Actions
vue-testing-handbook/actions.spec.js at master · lmiller1990/vue-testing-handbook

ぶるー 2021/01/16に更新

actionsの内部では$axiosで呼んでいるので、以下に変更した

index.spec.ts

jest.mock('$axios', () => ({
  $get: (_url: string) => {
    return new Promise((resolve) => {
      if (mockError) throw Error('Mock error');

      url = _url;
      resolve(true);
    });
  },
}));

が、エラーになった

    Cannot find module '$axios' from 'test/store/index.spec.ts'

       6 | 
       7 | jest.mock('$axios', () => ({
    >  8 |   $get: (_url: string) => {
         |      ^
       9 |     return new Promise((resolve) => {
      10 |       if (mockError) throw Error('Mock error');
      11 |

actionsの内部でthis.$axiosでaxiosにアクセスできるのは、Nuxt.jsで@nuxtjs/axiosを使っているためなので、mockメソッドの第一引数はaxiosでよい

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

ぶるー 2021/01/16

mockしたaxiosをstore.$axiosにセットする

テストしたいstoreのファイルをimportする
localVueにVuexを設定する
1でimportしたファイルをStoreとしてオブジェクトを生成
3でつくったStoreにモックしたaxiosを設定する
actionsを呼び出す際は、dispatch(xxx)を使う

このスクラップは2021/01/17にクローズされました