CODEWITHSUNDEEP
vuejs2cypressvuetify.jsstylescypress-component-test-runner
Rory
Rory

Reputation: 2496

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

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?

Upvotes: 7

Views: 1743

Answers (2)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37763

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

Upvotes: -1

Fody
Fody

Reputation: 31904

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

Upvotes: 10

Related Questions