使用ViTest對Vue元件進行單元測試並模擬方法的方法指南

Question

使用vitest來模擬方法，透過單元測試vue組件。

MyComponent.vue

<script setup>
import { ref } from "vue";

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

const onChange = () => {
    isSelectAll.value = true;
    selectAllModel.value = false;
};
const onVisibleChange = () => {
  // do something than call
  onChange();
};
</script>

我想透過模擬onChange來單元測試onVisibleChange方法，並檢查onChange是否被呼叫。

MyComponent.spec.js

import { mount } 從 'vitest';
import { ref } 從 'vue';
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  const wrapper = shallowMount(MyComponent);
  const spy = vi.spyOn(wrapper.vm, 'onChange');
  wrapper.vm.onVisibleChange();
  expect(spy).toHaveBeenCalled();
  expect(wrapper.vm.onChange).toHaveBeenCalled();
  // Both the expect gives error: AssertionError: expected "onChange" to be called at least once

  //Also tried
  const mock = vi.fn();
  wrapper.vm.onChange = mock;
  wrapper.vm.onVisibleChange();
  expect(mock).toHaveBeenCalled(); // AssertionError: expected "spy" to be called at least once
  expect(wrapper.vm.onChange).toHaveBeenCalled(); // TypeError: [Function onChange] is not a spy or a call to a spy!
})

Answer 1

測試方法並不是一個好主意。因為函數的名稱可能會改變。

更好的方法是測試：

1. 從元件中發出的事件。也許你的 onChange() 包含了事件的發出。這個發出應該要被測試。
2. 模板中的變化。例如，你的 onChange() 改變了模板。所以這些變化也應該要被測試。
3. 呼叫其他函數。例如，你有一些在專案中通用的函數。這些函數可以使用 spy.on 進行測試。