How can I wrap a vue component during cypress component testing?

Question

I am using component testing in Cypress on Vue. My project components use the vuetify plugin.

Currently, tested components load with 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') ✅

}

However, the stylings are not functioning correctly because Vuetify components need to be wrapped in a <v-app> at least once on the page. In component testing this is not happening.

I need to customise the wrapper as suggested here in the docs for the React equivalent. However whenever I try to make my own function to do this, I get an error that the appropriate webpack loader isn't there. Vue loader is there and working.

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

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

Can anyone help me with where to go next with this?

Answer 1

You can construct a simple wrapper in the test, for example

Component to test - Button.vue

<template>
  <v-btn color="red lighten-2" dark>
    Click Me
  </v-btn>
</template>

Test

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
})