'Cypress Vue Component Test for Event Emitted from mounted
I have a vue2 component that emits an event in its mounted lifecycle hook. This event is emitted and can be handled by a page using the component. However, I would also like to test that that the event is emitted in my component tests, which use the Cypress Component Test Runner. Here is a boiled down version... The component:
TheComponent = {
template: `
<div data-cy="the-component">
</div>`,
data() {
return {
}
},
mounted() {
this.$emit('the-event')
},
}
And the test:
describe('Test', () => {
it('emits an event when mounted', () => {
const spy = cy.spy()
mount(TheComponent)
.then(() => {
Cypress.vue.$on('the-event', spy)
})
.then(() => {
expect(spy).to.be.calledOnce
})
})
})
The issue is that the Cypress.vue object is not created until after the component is mounted. But the spy must be registered on the Cypress.vue object. So when it is registered as above, the mounted hook has already run and the spy is not called.
Am I missing something?
Is there another approach that would let me test that the event is emitted from mounted?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
