Cannot access component variables (via Vue Test Utils wrapper, when using Vuetify)

[devjared1]

Current behavior

Using Cypress 9.7.0, after adding the Vuetify plugin to our Vue3/Vite app, I am not able to access component variables or methods in a component test.

Desired behavior

Before adding the Vuetify plugin, I was able to access component variables and methods.

Test code to reproduce

Here is my cypress\index.js file:

import { VApp } from 'vuetify/lib/components/VApp/index.mjs';
import { h } from 'vue';
import { mount } from '@cypress/vue';

Cypress.Commands.add("mount", (component, props, args) => {
  return mount(
    { render: () => h(VApp, {}, [h(component, props)]) },
    { ...args }
  );
});

TestNavbar.vue file:

<template>
  <v-app-bar density="compact" data-cy="navbar">
    <v-app-bar-nav-icon color="grey-lighten-2" data-cy="drawer-btn" />
    <v-app-bar-title class="pl-0">
      <span data-cy="title">Test Title</span>
    </v-app-bar-title>
  </v-app-bar>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const testFoo = ref('');
</script>

<style scoped lang="sass">
</style>

TestNavbar.cy.js file

import TestNavbar from './TestNavbar.vue';
import vuetify from '../plugins/vuetify';

describe('Navbar component tests', () => {
  it.only('Default view', () => {
    cy.mount(TestNavbar, {}, {
      global: {
        plugins: [vuetify]
      }
    })
      .then(() => {
        cy.get('[data-cy="navbar"]').should('be.visible');
        cy.get('[data-cy="drawer-btn"]').should('be.visible');
        cy.get('[data-cy="title"]').should('be.visible').then((span) => {
          expect(span.text()).to.eq('Test Title');
        });
        // before Vuetify plugin
        console.log(Cypress.vueWrapper.vm.testFoo);
        // after Vuetify plugin, get the nested TestNavbar component
        console.log(Cypress.vueWrapper.getComponent(TestNavbar).vm.testFoo);
      });
  });
});

Before we added the Vuetify plugin, I was able to access component variables after mounting with Cypress.vueWrapper.vm.variableName. Now, since we have to wrap components with the VApp component in tests, Cypress.vueWrapper.vm is tied to the VApp component. I thought that doing Cypress.vueWrapper.getComponent(TestNavbar).vm.variableName would give me access but it is undefined.


Does anyone have any suggestions on anything else to try? Thanks in advance!

Cypress Version

9.7.0

Node version

16.18.0

Operating System

Windows10

Debug Logs

No response

Other

No response

[marktnoonan]

Hi @devjared1, there are a couple of things to think about here. Since you are still on Cypress 9 and the alpha version of CT, this article I wrote might be helpful: https://css-tricks.com/testing-vue-components-with-cypress/#aa-adding-attributes-required-by-vuetify - it avoids the v-app wrapper by modifying the surrounding DOM in the mount command.

It's based on this reference repo: https://github.com/elevatebart/cy-ct-vuetify. This doesn't set plugins in the mount command, and it's possibly too simple an example compared to what you are doing.

There are some other directions around working with Vuetify here: https://docs.cypress.io/guides/component-testing/vue/examples#Replicating-the-expected-Component-Hierarchy - that uses a slightly different way of setting up the plugin.

There have been several small but potentially important changes in Cypress Component Testing between the alpha you are using, the beta that came with v10, and the now full release in v11. So I would be curious if it's possible to upgrade your project and see what the experience is in the latest.

[devjared1]

@marktnoonan Thank you for the response! I stumbled upon https://css-tricks.com/testing-vue-components-with-cypress/#aa-adding-attributes-required-by-vuetify while searching google and was never able to get that to work for me (could be user error). I also read the docs from https://docs.cypress.io/guides/component-testing/vue/examples#Replicating-the-expected-Component-Hierarchy , but it was throwing errors for me on those import statements. Maybe the docs need updating since the lastest Vuetify has been released?

I am going to look into updating a test repo to the latest Cypress and see what I can get working with it now. I will give you an update later today.

[marktnoonan]

Converted this issue to a discussion, since it doesn't seem to be an issue with Cypress itself (and deals with an old version), but let's keep talking to get this working.

[devjared1]

@marktnoonan I updated my repo to the latest Cypress (11.2.0) but I am still seeing the same issue. I actually have it working in one test repo located here. However, I have not been able to replicate it in my repo. I even scaffolded a new Vite/Vue3 project (no Vuetify), added the latest Cypress, and that repo is not working correctly either. It is located here.
I cannot figure out the differences in those repos that would allow it to work correctly in one and not the other. Any help is greatly appreciated!

[marktnoonan]

Thanks so much for these examples 🙏 , we are on a break due to the Thanksgiving holiday in the US but I will see if I can compare these in detail next week

[devjared1]

@marktnoonan the only difference I could find in the above repos I could find was the version of vue. The repo that is working is running Vue 3.2.40 and the one that is not working is running 3.2.45. I downgraded the repo that was not working from 3.2.45 to 3.2.40 and the tests started working. So, in my own repo, I was running vue 3.2.16. I upgraded it to 3.2.40 and it is working as well. As a test, I tried upgrading my repo to 3.2.45, but that broke the Cypress tests again. I'm still not sure what exactly is going on or if that is even that real "fix" for the problem, but it is working for the time being. The Cypress tests even passed in a Gitlab CI. So, that is what we're going with for now, but I'm still interested to hear what you think could be going on. Thanks!

[marktnoonan]

Nice job isolating this to the Vue version, we'll check it out and see if there are any other problems using that version of Vue. Not sure if it points to a Vue + Vuetify problem, a Vue 3.2.45 + VTU problem, or a Vuew 3.2.45 + Cypress problem 🤔

[WaldemarEnns]

@marktnoonan I still face this issue, my versions:

• vue 3.3.4
• vuetify 3.3.15
• cypress 13.1.0
• vite 4.4.9
• typescript 5.2.2

Without wrapping into a VApp:

component.ts

import { mount } from 'cypress/vue'
import vuetify from '../../src/plugins/vuetify'

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount
    }
  }
}

Cypress.Commands.add('mount', (component, options = {}) => {
  options.global = options.global || {}
  options.global.plugins = options.global.plugins || []
  options.global.plugins.push(vuetify)
  
  return mount(component, options)
})

Example component: BaseNavigation.vue

<script setup lang="ts">
interface Props {
  links: {
    title: string
    to: string
    icon: string
  }[]
}

const props = defineProps<Props>()
</script>

<template>
  <v-navigation-drawer
    elevation="1"
    location="left"
    permanent
  >
    <v-list
      density="compact"
      nav
    >
      <v-list-item
        v-for="link in props.links"
        :key="link.to"
        link
        :prepend-icon="link.icon"
        :title="link.title"
        :to="link.to"></v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

Example component test:

import BaseNavigation from '../../src/components/BaseNavigation.vue'

describe('<BaseNavigation />', () => {
  it('renders', () => {
    const links = [
      {
        title: 'Home',
        to: '/',
        icon: 'mdi-home'
      }
    ]

    cy.mount(BaseNavigation, {
      props: {
        links,
      }
    })
  })
})

Result:

With wrapping into VApp:

component.ts:

import { mount } from 'cypress/vue'
import vuetify from '../../src/plugins/vuetify'
import { h } from 'vue'
import { VApp } from 'vuetify/components'

// Augment the Cypress namespace to include type definitions for
// your custom command.
// Alternatively, can be defined in cypress/support/component.d.ts
// with a <reference path="./component" /> at the top of your spec.
declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount
    }
  }
}

Cypress.Commands.add('mount', (component, options = {}) => {
  options.global = options.global || {}
  options.global.plugins = options.global.plugins || []
  options.global.plugins.push(vuetify)
  
  return mount({
    render() {
      return h(VApp, {}, [h(component, options.props)])
    },
    options
  })
})

This immediately fires TS-errors:

Argument of type '(this: Context, component: ComponentOptionsWithObjectProps<Readonly<ComponentPropsOptions>, unknown, {}, ComputedOptions, Record<string, Function>, EmitsOptions, ComponentOptionsMixin, ComponentOptionsMixin, string>, options?: MountingOptions<...> | undefined) => Chainable<...>' is not assignable to parameter of type 'CommandFn<"mount">'.
  Type 'Chainable<{ wrapper: VueWrapper<ComponentPublicInstance<{ [x: number]: unknown; } & { readonly filter?: Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S[]; (predicate: (value: string, index: number, array: readonly stri...' is not assignable to type 'void | Chainable<{ wrapper: VueWrapper<ComponentPublicInstance<ExtractPropTypes<Readonly<ComponentPropsOptions>>, unknown, {}, ComputedOptions, Record<...>, EmitsOptions, VNodeProps & ... 1 more ... & { ...; }>>; component: ComponentPublicInstance<...>; }>'.
    Type 'Chainable<{ wrapper: VueWrapper<ComponentPublicInstance<{ [x: number]: unknown; } & { readonly filter?: Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S[]; (predicate: (value: string, index: number, array: readonly stri...' is not assignable to type 'Chainable<{ wrapper: VueWrapper<ComponentPublicInstance<ExtractPropTypes<Readonly<ComponentPropsOptions>>, unknown, {}, ComputedOptions, Record<string, Function>, EmitsOptions, VNodeProps & ... 1 more ... & { ...; }>>; component: ComponentPublicInstance<...>; }>'.
      Types of property 'and' are incompatible.
        Type 'Chainer<{ wrapper: VueWrapper<ComponentPublicInstance<{ [x: number]: unknown; } & { readonly filter?: Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S[]; (predicate: (value: string, index: number, array: readonly string...' is not assignable to type 'Chainer<{ wrapper: VueWrapper<ComponentPublicInstance<ExtractPropTypes<Readonly<ComponentPropsOptions>>, unknown, {}, ComputedOptions, Record<string, Function>, EmitsOptions, VNodeProps & ... 1 more ... & { ...; }>>; component: ComponentPublicInstance<...>; }>'.
          Types of parameters 'fn' and 'fn' are incompatible.
            Types of parameters 'currentSubject' and 'currentSubject' are incompatible.
              Type '{ wrapper: VueWrapper<ComponentPublicInstance<{ [x: number]: unknown; } & { readonly filter?: Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S[]; (predicate: (value: string, index: number, array: readonly string[]) => u...' is not assignable to type '{ wrapper: VueWrapper<ComponentPublicInstance<ExtractPropTypes<Readonly<ComponentPropsOptions>>, unknown, {}, ComputedOptions, Record<string, Function>, EmitsOptions, VNodeProps & ... 1 more ... & { ...; }>>; component: ComponentPublicInstance<...>; }'.ts(2345)

⚠️ But apparently that is working:

Result:

⚠️ My Cypress UI display the component as <unknown ... /> though.

What next?

So it seems as if I have two issues:

• TS is breaking somehow and giving me weird issues
• The mounted components name is not displayed correctly
• Obviously, with using the h() render method, I break my slots as well (have not fixed it yet)

I hope that I could generate some traction and keep this issue up, since it's not fixed and I am loosing my mind around it 😄