英文:
How to use component in slot for component testing with Cypress and Vue?
问题
我需要在使用Vue的Cypress组件测试时在插槽中导入一个组件。
文档中说，对于插槽：
import DefaultSlot from './DefaultSlot.vue';
describe('<DefaultSlot />', () => {
it('renders', () => {
cy.mount(DefaultSlot, {
slots: {
default: 'Hello there!',
},
})
cy.get('div.content').should('have.text', 'Hello there!')
})
})
我想要像这样做：
<DefaultSlot>
<AnotherSlot />
</DefaultSlot>
英文:
I need to import a component in slot with Cypress component Testing using Vue.
Documentation say that for slots :
import DefaultSlot from './DefaultSlot.vue'
describe('<DefaultSlot />', () => {
it('renders', () => {
cy.mount(DefaultSlot, {
slots: {
default: 'Hello there!',
},
})
cy.get('div.content').should('have.text', 'Hello there!')
})
})
I want to do like this :
<DefaultSlot>
<AnotherSlot />
</DefaultSlot>
答案1
得分: 1
为了解决我的问题，我已经使用组件选项导入了组件，如下所示：
import DefaultSlot from './DefaultSlot.vue'
import AnotherSlot from './AnotherSlot.vue';
describe('
it('renders', () => {
cy.mount(DefaultSlot, {
components: {
AnotherSlot
},
slots: {
default: '
},
});
cy.get('div.content').should('have.text', 'Hello there!');
});
});
<details>
<summary>英文:</summary>
To solve my question, I've imported component using components options like :
import DefaultSlot from './DefaultSlot.vue'
import AnotherSlot from './AnotherSlot.vue'
describe('<DefaultSlot />', () => {
it('renders', () => {
cy.mount(DefaultSlot, {
components: {
AnotherSlot
}
slots: {
default: '<AnotherSlot label="my label" />',
},
})
cy.get('div.content').should('have.text', 'Hello there!')
})
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论