Guide pratique pour les tests unitaires des composants Vue et les méthodes de simulation à l'aide de ViTest

Question

Utilisez Vitest pour simuler des méthodes et des composants de vue de tests unitaires.

MyComponent.vue

<configuration du script>
importer { ref } depuis "vue" ;

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

const onChange = () =>
    isSelectAll.value = vrai ;
    selectAllModel.value = faux ;
} ;
const onVisibleChange = () =>
  // fait autre chose que d'appeler
  sur le changement();
} ;
</script>

Je souhaite tester la méthode onVisibleChange en simulant onChange et vérifier si onChange

MyComponent.spec.js

importer { mount } depuis 'vitest';
importer { ref } depuis 'vue' ;
importer MyComponent depuis './MyComponent.vue' ;

décrire('MonComposant', () => {
  const wrapper =shallowMount(MonComponent);
  const spy = vi.spyOn(wrapper.vm, 'onChange');
  wrapper.vm.onVisibleChange();
  attendre(espion).toHaveBeenCalled();
  expect(wrapper.vm.onChange).toHaveBeenCalled();
  // Les deux attentes donnent l'erreur : AssertionError : "onChange" devrait être appelé au moins une fois.

  //J'ai aussi essayé
  const mock = vi.fn();
  wrapper.vm.onChange = mock;
  wrapper.vm.onVisibleChange();
  expect(mock).toHaveBeenCalled(); // AssertionError : "espion" devrait être appelé au moins une fois
  expect(wrapper.vm.onChange).toHaveBeenCalled(); // TypeError : [Function onChange] n'est pas un espion ou un appel à un espion !
})

Answer 1

Les méthodes de test ne sont pas une bonne idée. Car le nom de la fonction peut changer.

Une meilleure façon est de tester :

1. Événements émis par les composants. Peut-être que votre onChange() contient l'émission d'événements. Ce problème devrait être testé.
2. Changements dans les modèles. Par exemple, votre onChange() modifie le modèle. Ces changements devraient donc également être testés.
3. Appelez d’autres fonctions. Par exemple, vous disposez de certaines fonctions communes à tous les projets. Ces fonctions peuvent être testées en utilisant spy.on.