my stack:
cypress
@vue/test-utils
component in vue3 in composition api (<script setup />)
My test, i would like to spy a method inside a component .
myComponent
testView.vue
<template>
<div class="test" @click="a()">test </test>
<template>
<script setup>
function a() {
// logic
b()
}
function b() {
// logic
}
</script>
test.cy.js
describe('ClientView.vue', () => {
it('test', async () => {
const store = createStore({
state() {
return {
varA: null,
}
},
actions: {
actionA(context, newMessage) {
return Promise.resolve()
},
},
})
const mockRoute = createRouter({ history: createWebHistory(), routes: [] })
mockRoute.currentRoute.value.name = 'testUrl'
mockRoute.currentRoute.value.params = undefined
const wrapper = mount(testView, {
global: {
mocks: {
$route: mockRoute,
},
plugins: [store, mockRoute]
},
})
const spyA = cy.spy(wrapper.vm, 'a').as('a')
const stubB= cy
.stub(wrapper.vm, 'b')
.callsFake((methods, payload) => {
console.log('methods', methods)
console.log('payload', payload)
return true
})
.as('b')
// simulate click and launch function a()
// I see in my log, the function A, b and the action is called
wrapper.find('test').trigger('click')
expect(spyA ).to.be.called
expect(stubB ).to.be.called
})
})
My errors
spyA is called ok
expected stubB to have been called at least once, but it was never called
Id a update my component
testView.vue
<template>
<div class="test" @click="a()">test </test>
<template>
<script setup>
function a() {
// logic
// add this but it's not autorize in vue3 in composition api.
this.b()
}
function b() {
// logic
}
</script>
My test work ...
Cypress has a problem with the version of vue3 in composition api ? or i need to declare my stub otherwise ?
thanks for help.