vuex-module-decorators(Vuex、store)のjestを書く

初めに

自分のメモ用として記載しています。
端折って書いている場所もある為、ご了承ください。

vuex-module-decoratorsを使ってstoreの作成をしていた際に
テスト（jest）をどう書けばわからなかった経緯があった為記載します。

*以下の記事などでも書いて下さっているのですが、自分の場合は正常に動作しなかった為
https://qiita.com/azukiazusa/items/8a158913c870bc0c8ba9

storeの実装について

src配下に以下のように作成したとします。

store
├── index.ts
├── app.ts
└── utils
    ├── accessor.ts

index.ts

import { Store } from 'vuex';
import { initializeStores } from '@/store/utils/accessor';

const initializer = (store: Store<any>) => initializeStores(store);

export const plugins = [initializer];
export * from '@/store/utils/accessor';

accessor.ts

import { Store } from 'vuex';
import { getModule } from 'vuex-module-decorators';
import AppModule from '@/store/app';

let appModule: AppModule;

function initializeStores(store: Store<any>): void {
  appModule = getModule(AppModule, store);
}

export {
  initializeStores,
  appModule
};

*型などは適当に埋めています。こんなstoreを作成していると見てください

app.ts

import { Module, Action, VuexModule, Mutation } from 'vuex-module-decorators';
import { $axios } from '@/store/utils/api.ts';

@Module({
  name: 'app',
  stateFactory: true,
  namespaced: true
})
export default class AppModule extends VuexModule {
  private app: any = [];

  @Mutation
  set〜(app: any) {
    this.app = app;
  }

  @Action({ rawError: true })
  async fetchApp(type?: string): Promise<any> {
    const params = {
      〜
    };

    await $axios
      .$get('〜', { params })
      .then((res) => {
        this.set~(res.item);
      });
  }

  get appList(): any {
    if (!this.app) {
      return [];
    }

    return this.app;
  }
}

app.tsのテストを書く

yarn buildを行うと.nuxtが作成されます。
そのstore.jsにあるcreateStoreを使ってstoreのAppModuleを利用できるようにしました。

app.spec.ts

import { getModule } from 'vuex-module-decorators';
import AppModule from '@/store/app';
import { createStore } from '@/../.nuxt/store';

jest.mock('@/store/utils/api.ts', () => ({
  $axios: {
    $get: jest.fn(() =>
      Promise.resolve({
        item: [{ name: '〜' }],
        total: 10
      })
    )
  }
}));　// $axiosのmockです。

let AppModule: any;

beforeAll(() => {
  const store = createStore();
  AppModule = getModule(AppModule, store);　// こちらです。
});

describe('AppModule', () => {
  test('appList', async () => {
    await AppModule.fetch();
    expect(AppModule.appList).toStrictEqual([
      { name: '〜' }
    ]);
  });
});

最後に

かなり無理やりなテストの書き方だと思うのですが、他に良い方法があれば教えて頂きたいです。