Estoy usando Vue3 + Vite + Cypress. Uso de la sintaxis SFC script setup Vue3. tengo un componente:
<template> <div> <button data-cy="testBtn" @click="btnClick()"> Click </button> </div> </template> <script setup lang="ts"> function btnClick():void { console.log('clicked'); } </script> ¿Cómo puedo espiar btnClick para poder afirmar que ha sido llamado cuando hago cy.get('[data-cy="testBtn"]').click(); ?
Yo he tratado:
describe('Test', () => { it.only(`Test`, () => { mount(TestComponent, { props: { device: TestComponent } }); cy.vue().then((wrapper) => { const test = cy.spy(wrapper.vm, 'btnClick'); cy.get('[data-cy="testBtn"]').click(); expect(test).to.be.called; }); }); }); pero aparece un error Attempted to wrap undefined property btnClick as function
Parece un error en cy.spy() cuando se usa con la prueba de componentes.
Este espía "manual" me funcionó
it.only('', () => { mount(TestComponent) .then(() => { // wait for mount to complete // spy on click handler let called; const original = Cypress.vueWrapper.vm.btnClick Cypress.vueWrapper.vm.btnClick = () => { called = true original() } cy.get('[data-cy="testBtn"]').click() .then(() => expect(called).to.eq(true)) }) });