vue.js - Cypress Vue 组件测试从已挂载发出的事件

Question

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

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 对象在组件安装后才创建。但 spy 必须在 Cypress.vue 对象上注册。所以当它按照上面的方式注册时，挂载的钩子(Hook)已经运行了，并且 spy 没有被调用。

我错过了什么吗？

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

Answer 1

Cypress mount() 与 Vue-Test-Utils mount() 具有相同的 API，因此您可以添加 listeners到安装选项

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