[英]Issue testing components with Slots with Vue and Cypress
I am new to component testing and Cypress.我是组件测试和赛普拉斯的新手。 I have been following the official documentation and examples to do some basic component testing on my project.
我一直在按照官方文档和示例对我的项目进行一些基本的组件测试。 Eventually, I stumbled upon a case where I wanted to test a simple component I wrote which accepts a single slot (
default
) and since it was awfully similar to an example provided in the @cypress/vue
repository, I took the liberty to copy the code and adjust it to my liking.最终,我偶然发现了一个案例,我想测试我编写的一个简单组件,它接受一个插槽(
default
),因为它与@cypress/vue
存储库中提供的示例非常相似,所以我冒昧地复制了代码并根据我的喜好进行调整。
However, while the first test passes and mounts without issue, when I try to mount the component being tested passing it a default slot, I get a type error with Cannot convert undefined or null to object
.但是,虽然第一个测试通过并安装没有问题,但当我尝试安装正在测试的组件时,我收到了一个类型错误,
Cannot convert undefined or null to object
。 Since then, I went through Vue and Vue-Testing examples and I do not seem to figure out what I am doing wrong when invoking the mount function.从那时起,我浏览了 Vue 和 Vue-Testing 示例,但在调用 mount 函数时我似乎没有弄清楚我做错了什么。 Below are my code snippets for the souls who can help me on this one.
下面是我的代码片段,供那些可以帮助我解决这个问题的人使用。
BaseButton基本按钮
<template>
<a role="button" class="btn btn-primary">
<slot />
</a>
</template>
BaseButton.spec.ts BaseButton.spec.ts
import BaseButton from '@/components/BaseButton.vue'
import { mount } from '@cypress/vue'
describe('BaseButton', () => {
context('when slots are not passed', () => {
it('renders nothing', () => {
mount(BaseButton)
cy.get('a').should('have.text', '')
})
})
context('when slots are passed', () => {
it('renders slots', () => {
mount(BaseButton, {
slots: {
default: 'Test Button',
},
})
cy.get('a').should('have.text', 'Test Button')
})
it('renders scopedSlots', () => {
mount(BaseButton, {
slots: {
default: '<template #default="props"><p>Yay! {{props.content}}</p></template>',
},
})
cy.contains('Yay! Scoped content!').should('be.visible')
cy.contains('Nothing used the Scoped content!').should('not.exist')
})
})
})
Here is the official example I based the code on.这是我基于代码的官方示例。
You can try the following:您可以尝试以下方法:
mount(BaseButton, {
slots: {
default: {
render: () => "Test Button"
}
}
})
You can also simplify it你也可以简化它
mount(BaseButton, {
slots: {
default:() => "Test Button"
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.