Anleitung zum Unit-Testen von Vue-Komponenten und Mock-Methoden mit ViTest

Question

Verwenden Sie vitest, um Methoden und Unit-Test-Vue-Komponenten zu simulieren.

MyComponent.vue

<script setup>
import { ref } aus „vue“;

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

const onChange = () =>
    isSelectAll.value = true;
    selectAllModel.value = false;
};
const onVisibleChange = () =>
  // etwas tun als anrufen
  bei Änderung();
};
</script>

Ich möchte die Methode onVisibleChange testen, indem ich onChange

MyComponent.spec.js

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

beschreiben('MyComponent', () => {
  const wrapper = flachMount(MyComponent);
  const spy = vi.spyOn(wrapper.vm, 'onChange');
  wrapper.vm.onVisibleChange();
  erwarten(spy).toHaveBeenCalled();
  erwarten(wrapper.vm.onChange).toHaveBeenCalled();
  // Beide Erwartungswerte geben einen Fehler aus: AssertionError: erwartet, dass „onChange“ mindestens einmal aufgerufen wird

  //Auch versucht
  const mock = vi.fn();
  wrapper.vm.onChange = mock;
  wrapper.vm.onVisibleChange();
  Expect(mock).toHaveBeenCalled(); // AssertionError: erwartet, dass „spy“ mindestens einmal aufgerufen wird
  expect(wrapper.vm.onChange).toHaveBeenCalled(); // TypeError: [Function onChange] ist kein Spion oder ein Aufruf an einen Spion!
})

Answer 1

测试方法并不是一个好主意。因为函数的名称可能会改变。

更好的方法是测试：

1. 从组件中发出的事件。也许你的 onChange() 包含了事件的发出。这个发出应该被测试。
2. 模板中的变化。例如，你的 onChange() 改变了模板。所以这些变化也应该被测试。
3. 调用其他函数。例如，你有一些在项目中通用的函数。这些函数可以使用 spy.on 进行测试。