Cypress Vue 组件测试从已挂载发出的事件

Question

我有一个 vue2 组件，它在其安装的生命周期挂钩中发出一个事件。该事件被发出，并且可以由使用该组件的页面处理。但是，我还想测试该事件是否在我的组件测试中发出，该测试使用赛普拉斯组件测试运行程序。这是一个精简版本...组件：

TheComponent = {
    template: `
        <div data-cy="the-component">
        
        </div>`, 
    data() {
        return {

        }
    },
    mounted() {
        this.$emit('the-event')
    },
}

和测试：

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
        })
    })
})

问题是 Cypress.vue 对象只有在组件安装后才会创建。但间谍必须在 Cypress.vue 对象上注册。所以当它按照上面的方式注册时，挂载的钩子已经运行了，并且间谍没有被调用。

我错过了什么吗？

是否有另一种方法可以让我测试事件是否是从 Mounted 发出的？

Answer 1

Cypressmount()具有与 Vue-Test-Utils 相同的 API mount()，因此您可以将侦听器添加到安装选项

const spy = cy.spy()
mount(HelloWorld, {
  listeners: {
    'the-event': spy
  }
})
.then(() => {
  expect(spy).to.be.calledOnce
})