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

Question

我有一个 vue2 组件，它在其安装的生命周期挂钩中发出一个事件。此事件已发出，可由使用该组件的页面处理。但是，我还想测试该事件是否在我的组件测试中发出，它使用 Cypress Component Test Runner。这是一个精简版...组件：

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 hook已经运行，没有调用spy

我是不是漏掉了什么？

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

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

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

Cypress Vue Component Test for Event Emitted from mounted

testing

events

components

vue.js

cypress