Panduan cara untuk menguji unit komponen Vue dan kaedah mengejek menggunakan ViTest

Question

Gunakan vitest untuk mensimulasikan kaedah dan komponen vue ujian unit.

MyComponent.vue

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

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

const onChange = () =>
    isSelectAll.value = benar;
    selectAllModel.value = palsu;
};
const onVisibleChange = () =>
  // buat sesuatu daripada menelefon
  onChange();
};
</script>

Saya ingin menguji kaedah onVisibleChange dengan mengejek onChange

MyComponent.spec.js

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

describe('MyComponent', () => {
  pembungkus const = shallowMount(MyComponent);
  const spy = vi.spyOn(wrapper.vm, 'onChange');
  wrapper.vm.onVisibleChange();
  expect(spy).toHaveBeenCalled();
  expect(wrapper.vm.onChange).toHaveBeenCalled();
  // Kedua-dua jangkaan memberikan ralat: AssertionError: dijangka "onChange" akan dipanggil sekurang-kurangnya sekali

  //Juga mencuba
  const mock = vi.fn();
  wrapper.vm.onChange = olok-olok;
  wrapper.vm.onVisibleChange();
  expect(mock).toHaveBeenCalled(); // AssertionError: dijangka "pengintip"
  expect(wrapper.vm.onChange).toHaveBeenCalled(); // TypeError: [Function onChange] bukan pengintip atau panggilan kepada pengintip!
})

Answer 1

Kaedah ujian bukanlah idea yang baik. Kerana nama fungsi mungkin berubah.

Cara yang lebih baik adalah dengan menguji:

1. Acara yang dipancarkan daripada komponen. Mungkin onChange() anda mengandungi pemancaran peristiwa. Isu ini harus diuji.
2. Perubahan dalam templat. Contohnya, onChange() anda menukar templat. Jadi perubahan ini juga harus diuji.
3. Panggil fungsi lain. Sebagai contoh, anda mempunyai beberapa fungsi yang biasa merentas projek. Fungsi-fungsi ini boleh diuji menggunakan spy.on.