Hi, can somebody share here relevant changes in config files for adding cypress component testing to vuetify project? so far I checked a video where it was already installed (and previous to current release). Also tried documentation mixing and matching from vue2, vuex, nuxt and the specific examples that actually mention vuetify with little luck. Also tried https://css-tricks.com/testing-vue-components-with-cypress/#importing-vuetify which is pretty complete, but prior to cypress 10 release. I get components mounted but then get errors with internal variables of the component.

So i tried to setup cypress with vue3, vite and typescript. i used this as a guildline: https://github.com/cypress-io/cypress-component-testing-apps/tree/main/vue3-vite-ts But all i get is an endless loading screen.

ATest.vue

ts
<template>
  <div class="test">{{ $props.msg }}</div>
  <div>Count: {{ count }}</div>
  <button @click="count++">Click me</button>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

defineProps({
  msg: {
    type: String,
    default: 'Test',
  },
})

const count = ref(0)
</script>
<style scoped>
.text {
  color: red;
}
</style>

this is my testfile:

ATest.cy.ts

ts
import ATest from './ATest.vue'

describe('ATest.vue', () => {
  it('should mount', () => {
    cy.mount(ATest, {
      props: {
        msg: '324'
      }
    });
    cy.get('div')
  });
});

anyone any idea? or had the same issue?

Is it possible to use a different bundler than the one your project uses? My project is Vue CLI but would love to run tests with Vite

https://discord.com/channels/755913899261296641/974362106822545429/987437114302033940 @limited-room-30929

what is the correct vite devserver version for cypress 10?

Hi, how can I pass a v-model to my mount? I tried 'v-model': data, value: data, nothing seems to work. Help please. I'm using Cypress 10.1.0

maybe

modelValue

depending on which version of vue

That's it @limited-room-30929 thank you. It's pretty obvious now that I think about it 🙂 Yes it's Vue 3. I was also able to hack it by changing the data directly with mocks but that didn't feel right.

global: {
  mocks: {
    listData: listData
  }
},

Hi, is there a way to configure mount options globally instead of on a test-by-test basis with

@cypress/vue

? when using

@vue/test-utils

directly it could be achieved as such, for example:

import { config } from '@vue/test-utils'
config.global.plugins.unshift([SomePlugin])

but that doesn't seem possible with

@cypress/vue

I can, of course, use:

mount(Foo, { global: { plugins: [SomePlugin] } })

But the plugin is required for every test, so it's a bit convoluted to do it everytime. I worked around it by always injecting the required plugin in my

cy.mount

, which works fine, but won't work when importing the

mount

directly, of course.

yeah, nevermind, seems to be the recommended approach (https://docs.cypress.io/guides/component-testing/custom-mount-vue#Replicating-Plugins)

Hi everyone Hope you all have a good time I want to know if anyone write any tests for their components in cypress?

pretty sure people now write many component tests in Vue, as well as React

I need source for writing test with cypress in vue2 project which contains vuex and other plugins If anyone has any source for that I would appreciate sharing with me.

@melodic-sandwich-17161 the documentation talks about how to create custom mount commands for use with vuex and other plugins

for Vue2, just make sure your support file + custom mount command is importing mount from

cypress/vue2

instead of

cypress/vue

Hello all, Is there a way to verify that a sub-component was called from a parent component?

If you render the parent with the conditions that should lead it to call the child, I would then just check the DOM to confirm that the child renders the elements you expect. I am sure you could do something to check the Vue component structure, but I don't know that you need to unless you have a very special situation. Ideally you could change the structure of your Vue files and not have to update the test unless you changed the API of the specific component under test.

Thanks, but I don't want to be dependant on the specific submodule, or the specific implementation. Like if I swap out the subcomponent for something with, say a different style, I don't want my tests to break.

Thanks but I don t want to be dependant

Hi, I get the same error like Wenish. I'm using the electron framework + vue3 + vite. I would like to use component testing. I narrowed the problem down and think the entry point for electron "dist/electron/main/index.js" gets called like a node script: "node dist/electron/main/index.js" which results in "app" being undefined. Is there a way I could call it like this: "electron dist/electron/main/index.js"?

hey i figured my error out. my vite setup was using https. and cypress searches on http for the dev server. this how the dev server für cypress is configured now

ts
devServer: {
      viteConfig: {
        server: {
          https: false,
        },
      },
      framework: 'vue',
      bundler: 'vite',
    },

Hm, this does not work for me

Let's GOOOOOO!!!! After spending a week faffing with webpack and Cypress configurations, I was worried I wouldn't get any components working end-to-end since we're using Vue 2, Vuetify, and custom webpack configs with no VueCLI. But I had my last breakthrough just now, and it's so beautiful! Had to share my joy somewhere - awesome work Cypress team! So excited to get fast, not flaky tests around our components!

This post was pivotal to getting Vuetify to play nicely with how our stuff is set-up, thanks again to everyone's help! https://css-tricks.com/testing-vue-components-with-cypress/#importing-vuetify

Congrats on your accomplishment! 🥳

What controls whether Cypress uses

cypress-vue2.esm-bundler.js

vs

cypress-vue.esm-bundler.js

? I ask because my component tests are calling the second one, even though ours is a Vue2 project. There were some errors getting thrown around

unmount

that I fixed with some duct tape during our custom mount function because of this. But yeah, I can't seem to find anywhere in the docs where one specifies which esm-bundler to use

New event from FacePunch and Twitch has been anonounced. Free expensive items from rust for everyone who have a steam account! Hurry up, the promotion lasts only from July 28 to August 15 https://rust-us.com/twitch-event

my guess would be what is present in the package json

Vuetify 3 + Vue3 + Vite and Cypress component testing