I'm currently utilizing Vue3 with Vite and Cypress. My Vue3 component utilizes the script setup SFC syntax. Below is the code snippet for my component:
<template>
<div>
<button data-cy="testBtn" @click="btnClick()">
Click
</button>
</div>
</template>
<script setup lang="ts">
function btnClick():void {
console.log('clicked');
}
</script>
The issue I'm facing is how to spy on the btnClick function in order to verify that it has been called when executing
cy.get('[data-cy="testBtn"]').click();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;
});
});
});
Unfortunately, this approach results in an error message stating
Attempted to wrap undefined property btnClick as function