He estado tratando de probar si se llama a un método en un componente Vue cuando se activa un botón específico.
He tenido éxito usando este método al principio:
it('should call the methodName when button is triggered', () => { const methodNameSpy = jest.spyOn(wrapper.vm, 'methodName') wrapper.find('.is-success').trigger('click') expect(methodNameSpy).toBeCalled() })Así que esto funcionó bien para algunos componentes, pero sigo recibiendo un error que me dice que no se invocó en algunos otros componentes.
Error: expect(jest.fn()).toHaveBeenCalled() Expected number of calls: >= 1 Received number of calls: 0Tengo una idea de por qué esta simple prueba está fallando en este caso, pero no tengo idea de cómo solucionarlo o incluso si esa es la razón.
Este componente es una "información sobre herramientas", una vez que se presiona el botón Guardar/Cerrar, se cierra y desaparece. Tal vez por eso la prueba está fallando, porque ya no puede encontrar los elementos probados.
Aquí está el componente y las pruebas.
componente.vue
<template lang="html"> <div class="editresewin" @click.stop> <div class="topbar"> <button class="button is-danger" @click="close" > <b-icon icon="close" /> </button> <button class="button is-success" @click="save" /> <h2 class="...">Title</h2> </div> <div class="..."> <div class="..."> <label>Label</label> <input .../> </div> </div> </div> </template>componente.spec.vue
describe('TheEditResourceFile', () => { let wrapper let defaultParams beforeEach(() => { defaultParams = { localVue, i18n, router, store, propsData: { args: { title: '', description: '', }, type: 'file', }, } wrapper = shallowMount(TheEditResourceFile, defaultParams) }) it('should trigger the save method', () => { const saveSpy = jest.spyOn(wrapper.vm, 'save') wrapper.find('.is-success').trigger('click') expect(saveSpy ).toBeCalled() }) })Avísame si se necesita más aclaración.
Gracias por tu ayuda.
Editar: código incorrecto en prueba fallida.
En Vue 2, el método simulado/espía del componente debe realizarse en la definición de .methods del componente, no en el envoltorio, antes del montaje. (A partir de Vue 3.2.31, este orden ya no es necesario para los métodos denominados montaje posterior).
Se debe await la llamada trigger('click') porque invoca el método enlazado de forma asíncrona.
El espía siempre dice la verdad, por lo que toBeTruthy() es una afirmación sin sentido. En su lugar, afirma toHaveBeenCalled() en el espía.
it('should trigger the save method', () => { 1️⃣ const saveSpy = jest.spyOn(TheEditResourceFile.methods, 'save') wrapper = shallowMount(TheEditResourceFile, defaultParams) 2️⃣ await wrapper.find('.is-success').trigger('click') 3️⃣ expect(saveSpy).toHaveBeenCalled() })