편백 컴포넌트 테스트 중에 vue 컴포넌트를 랩하려면 어떻게 해야 합니까?

편백 컴포넌트 테스트 중에 vue 컴포넌트를 랩하려면 어떻게 해야 합니까?

저는 Vue의 Cypress에서 컴포넌트 테스트를 사용하고 있습니다.프로젝트 컴포넌트는 vuetify 플러그인을 사용합니다.

현재 테스트된 구성 요소는 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에 해당하는 문서에 제시된 대로 래퍼를 커스터마이즈해야 합니다.그러나 이 기능을 위해 자체 기능을 만들려고 할 때마다 적절한 웹 팩 로더가 없다는 오류가 발생합니다.Vue loader가 작동하고 있습니다.

import {mount as cypressMount} from '@cypress/vue'

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

다음 행선지는 누구 도와줄 사람 있나요?

예를 들어 테스트에서 간단한 래퍼를 구성할 수 있습니다.

테스트할 컴포넌트 - 버튼표시하다

<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에서 가능한 JSX를 사용하려고 하지만 추가 빌드 플러그인을 구성해야 하기 때문에 오류가 발생합니다.

렌더링 기능을 사용하여 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,
  })
}

언급URL : https://stackoverflow.com/questions/69046663/how-can-i-wrap-a-vue-component-during-cypress-component-testing