¿Cómo corrijo mi prueba de unidad para probar correctamente lo siguiente?
Método:
close(event) { const element = !!event?.target?.closest('#target') if (!element) { this.isVisible = false } },Prueba de broma:
it('should hide visibility if element is false', () => { const wrapper = shallowMount(AccountLogin, { mocks }) wrapper.vm.close() expect(wrapper.vm.$data.isVisible).toBe(false) })Si el evento change() se activa en el elemento raíz de su componente, esto debería funcionar:
jest.spyOn(wrapper, 'closest') .mockImplementationOnce(() => true) wrapper.vm.close() expect(wrapper.vm.$data.isVisible).toBe(false) Si el evento se activa en un elemento secundario del componente raíz, deberá pasar ese elemento secundario a spyOn , de modo que se burle del elemento closest de ese elemento secundario, en lugar del segmento wrapper :
jest.spyOn(wrapper.find('input'), 'closest') .mockImplementationOnce(() => true) // ... Por qué necesita encontrar el elemento exacto: esto es jsdom : no es DOM real. Los eventos no burbujean.
Lo que hace lo anterior: secuestra el método .closest() del elemento de event.target para que devuelva true .
Lo cual, en su caso, provocará
!!event?.target?.closest('#target') para devolver true , por lo que se ejecutará this.isVisible = true .
Si desea probar que no se ejecuta cuando no se encuentra #target , escriba una segunda prueba, con un simulacro de .closest() que devuelve false y la prueba de que isVisible no se ha configurado de false a true al invocar .close() . Hacer más que eso sería probar que HTML funciona como se espera.
Te recomiendo que confíes en que sí.