赛普拉斯 Vue 组件测试从挂载发出的事件

格兰特布拉特

我有一个 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 对象上注册。所以当它如上注册时,挂载的钩子已经运行了,并没有调用 spy。

我错过了什么吗?

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

理查德·马森

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章