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?

score 7 · Accepted Answer · answered Sep 28 '21 at 08:28

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

score -1 · Answer 2 · edited Jul 16 '22 at 03:37

You get an error because you are trying to use JSX which is indeed possible with Vue but you need to configure additional build plugins.

Same can be achieved without JSX by using render function

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

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

2 Answers2