Vue Test Utilsでmountedフックをテストする方法

Vue Test Utilsでmountedフック内にある関数をstub化し、テストする方法です。

実装方法

mountedフックにある関数をstub化し、実際に呼ばれることを確認します。

テスト対象のコード

testComponent.vue

export default {
  mounted() {
    this.testFn();
  },
  methods: {
    testFn() {
      console.log('test');
    }
  }
};

テストコード

import testComponent from '~/testComponent.vue';

describe('mounted', () => {
  it('testFn should be called once', () => {
    const testFn = sinon.stub();
    const { mounted } = testComponent;
    const Component = {
      mounted,
      testFn
    };
    Component.mounted();
    assert.deepEqual(test.callCount, 1);
  });
});

参考