如何在测试柏木组件期间包装VUE组件? [英] How can I wrap a vue component during cypress component testing?
本文介绍了如何在测试柏木组件期间包装VUE组件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用component testing in Cypress on Vue。我的项目组件使用vuetify plugin。
目前,测试的组件加载了Vutify:
import DebuggingTemporaryComponent from "./DebuggingTemporaryComponent";
import {mount} from "@cypress/vue";
import vuetify from '../../resources/js/vuetify'
it('mounts the component with vuetify', () => {
mount(DebuggingTemporaryComponent,{vuetify,})
cy.contains('Hello World') ✅
}
但是,样式不能正常工作,因为Vutify组件需要在页面上至少包装一次<v-app>
。在组件测试中,这种情况不会发生。
我需要按照文档中建议的here自定义包装器,以实现Reaction等效项。然而,每当我尝试创建我自己的函数来执行此操作时,我都会得到一个错误,即没有合适的webpack加载器。VUE加载器在那里并且正在工作。
import {mount as cypressMount} from '@cypress/vue'
export function mount (component){
return cypressMount(<v-app>component</v-app>, prepareComponent(props, options))
}
有人能告诉我下一步要做什么吗?
推荐答案
您可以在测试中构造一个简单的包装器,例如
要测试的组件-Button.vue
<template>
<v-btn color="red lighten-2" dark>
Click Me
</v-btn>
</template>
测试
import Button from "./Button";
import {mount} from "@cypress/vue";
import vuetify from '../plugins/vuetify'
import { VApp } from 'vuetify/lib/components'
const WrapperComp = {
template: `
<v-app>
<Button />
</v-app>
`,
components: {
VApp,
Button
}
}
it('mounts the component with vuetify', () => {
mount(WrapperComp, { vuetify })
const lightRed = 'rgb(229, 115, 115)'
cy.contains('button', 'Click Me') // ✅
.should('have.css', 'background-color', lightRed) // fails if no <v-app> used above
})
这篇关于如何在测试柏木组件期间包装VUE组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文