Closed5

VuexをJestでテストする

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

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 });
    });
  });
});

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でテストする

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

  1. テストしたいstoreのファイルをimportする
  2. localVueにVuexを設定する
  3. 1でimportしたファイルをStoreとしてオブジェクトを生成
  4. 3でつくったStoreにモックしたaxiosを設定する
  5. actionsを呼び出す際は、dispatch(xxx)を使う
このスクラップは2021/01/17にクローズされました
ログインするとコメントできます