I’m using Vue3 + Vite + Cypress. Using Vue3 script setup
SFC syntax. I have a component:
<template>
<div>
<button data-cy="testBtn" @click="btnClick()">
Click
</button>
</div>
</template>
<script setup lang="ts">
function btnClick():void {
console.log('clicked');
}
</script>
How can I spy on btnClick
so that I can assert that it has been called when I do cy.get('[data-cy="testBtn"]').click();
?
I have tried:
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;
});
});
});
but I get an error Attempted to wrap undefined property btnClick as function