如何在 cypress 组件测试期间包装 vue 组件？

Posted 2023-02-16

【中文标题】如何在 cypress 组件测试期间包装 vue 组件？

【英文标题】：How can I wrap a vue component during cypress component testing?

【发布时间】：2021-11-01 21:33:09

【问题描述】：

我正在使用component testing in Cypress on Vue。我的项目组件使用vuetify plugin。

目前，已测试的组件使用 Vuetify 加载：

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') ✅

但是，样式无法正常运行，因为 Vuetify 组件需要在页面上至少一次包装在 <v-app> 中。在组件测试中，这不会发生。

我需要按照 React 等效文档中建议的 here 自定义包装器。但是，每当我尝试创建自己的函数来执行此操作时，都会收到一个错误，指出相应的 webpack 加载器不存在。 Vue 加载器在那里并且正在工作。

import mount as cypressMount from '@cypress/vue'

export function mount (component)
    return cypressMount(<v-app>component</v-app>, prepareComponent(props, options))

谁能帮我看看下一步该去哪里？

【参考方案1】：

您会收到错误消息，因为您尝试使用确实是 possible with Vue 的 JSX，但您需要配置其他构建插件。

使用render function 可以在不使用 JSX 的情况下实现同样的目标

import mount from "@cypress/vue";
import vuetify from '../../resources/js/vuetify'
import  VApp  from 'vuetify/lib/components'

function mountComponentWithVuetify(componentToMount, options = ) 

  return mount(
    render(h) 
      return h(VApp, [h(componentToMount)])
    
  ,
   
    vuetify, 
    ...options,
  )

【参考方案2】：

你可以在测试中构造一个简单的包装器，例如

要测试的组件 - 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
)