ViTest を使用した Vue コンポーネントとモック メソッドの単体テストのハウツー ガイド

Question

vitest を使用して、メソッドと単体テスト vue コンポーネントをシミュレートします。

MyComponent.vue

<スクリプトのセットアップ>
「vue」から { ref } をインポートします。

const isSelectAll = ref(true);
const selectAllModel = ref(false);

const onChange = () => {
    isSelectAll.value = true;
    selectAllModel.value = false;
};
const onVisibleChange = () => {
  // 呼び出すよりも何かをする
  onChange();
};
</script>

onChange をモックして onVisibleChange メソッドを単体テストし、onChange が呼び出されるかどうかを確認したいと考えています。

MyComponent.spec.js

import { mount } from 'vitest';
'vue' から { ref } をインポートします。
MyComponent を './MyComponent.vue' からインポートします。

description('MyComponent', () => {
  const ラッパー =shallowMount(MyComponent);
  const spy = vi.spyOn(wrapper.vm, 'onChange');
  「wrapper.vm.onVisibleChange();」
  Expect(spy).toHaveBeenCalled();
  Expect(wrapper.vm.onChange).toHaveBeenCalled();
  // どちらの期待値でもエラーが発生します: AssertionError: Expected "onChange" to be used at少なくとも1回

  // こちらも試してみました
  const モック = vi.fn();
  「wrapper.vm.onChange = モック;」
  「wrapper.vm.onVisibleChange();」
  Expect(mock).toHaveBeenCalled(); // AssertionError: "spy" が少なくとも 1 回呼び出されることが期待されています
  Expect(wrapper.vm.onChange).toHaveBeenCalled(); // TypeError: [関数 onChange] はスパイまたはスパイへの呼び出しではありません。
})

Answer 1

方法をテストするのは得策ではありません。関数の名前が変更される可能性があるため。

より良い方法はテストすることです:

1. コンポーネントから発行されるイベント。おそらく onChange() にはイベントの発行が含まれています。この問題はテストする必要があります。
2. テンプレートの変更。たとえば、onChange() はテンプレートを変更します。したがって、これらの変更もテストする必要があります。
3. 他の関数を呼び出します。たとえば、プロジェクト間で共通の関数がいくつかあるとします。これらの機能は、spy.on を使用してテストできます。