JestでVuexの処理をモック化する

概要

JestでVuexの処理をモック化する方法。

モック化の方法

テスト対象の関数(vuexTest)

<template>
  <div>
    <div>{{ vuexTestData }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';
import { clientStore } from '~/store';

@Component({})
export default class extends Vue {
  private vuexTestData: string = '';

  private vuexTest(): void {
    this.vuexTestData = clientStore.getTest;
  }
}
</script>

テストコード

import 任意の名前1 '@/pages/ファイル名';

jest.mock('~/store', () => ({
  clientStore: {
    getTest: 'vuexTest'
  }
}));

describe('任意の名前2', () => {
  it('任意の名前3', () => {
    const thisVal = {
      vuexTestData: ''
    };
    任意の名前1.options.methods.vuexTest.call(thisVal);
    expect(thisVal.vuexTestData).toEqual('vuexTest');
  });
});