When I have multiple Test with the same global component, then it only works once. Any idea why?

I just figured out, that the CSS of the global component is only included once .... looks like a bug

When I import the css in my test file, then it works

I would put a

data-testid

or similar attr on the outermost element and assert that it's not there after mount, but that it is there if you mount with more than one page? Also would you mind making an issue for the global component CSS problem you had?

Ok, thanks

Quasar Vite Testing (

dev-server start

)

.

not sure if this is a known issue but is not rendered as but just in component testing?

It sounds like router-link is not registered as a component. They are registered automatically when you Vue.use(router) or whatever. In an isolated component test, that still needs to be done. Some context here: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html When you use Cypress for component testing vue, it is the Vue Test Utils mount function you are using, so all those docs are valid for mounting in cypress. Just make sure you are looking at VTU docs for vue 2 or 3, whichever you need.

i see. i just tried it and it works now. Thank you! I'm using vue3 so the docs are here https://next.vue-test-utils.vuejs.org/guide/advanced/vue-router.html#using-a-real-router

Hello. I am trying to test my vue components but they need to be children of a App component for them to be styled correctly. Is there a way to set the parent vue component for a component test to be mounted within?

You can just mount the parent and specify the component while stubbing/mocking the rest to keep the rest isolated. Hope this helps. Might be useful to look at the docs for Vue Test Utils: https://next.vue-test-utils.vuejs.org/guide/advanced/stubs-shallow-mount.html

ts
// Component Testing Footer.Vue within the context of applying a layout
import defaultLayout from '~/layouts/default.vue'
import Footer from '~/components/Footer.vue'

  mount(defaultLayout, { global: { stubs: { RouterView: true }, components: { Footer } } })

Hello. I am trying to setup cypress component testing on my Primevue based project. One thing I noticed is that the components are not rendering as I expect (see button screenshots) Here's my test code. I used vue-test-utils options to set Primevue as a plugin dependency.

import { mount } from '@cypress/vue'
import Primevue from 'primevue/config'
import Button from 'primevue/button'

it('renders a message', () => {
  mount(Button, {
    props: {
      label: 'Hello Cypress!'
    },
    global: {
      plugins: [Primevue]
    }
  })
  cy.get('button').contains('Hello Cypress!')
})

Also I am having this warning on my terminal. Could this be causing my problem?

WARNING in ./node_modules/@vue/test-utils/dist/vue-test-utils.esm-bundler.js 283:18-28
"export 'extend' (imported as 'Vue') was not found in 'vue'
 @ ./node_modules/@cypress/vue/dist/cypress-vue.esm-bundler.js
 @ ./cypress/component/HelloWorld.spec.js
 @ ./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js
 @ ./node_modules/@cypress/webpack-dev-server/dist/browser.js

for further reference I also attached my

package.json

file. I would appreciate your help!

Make sure to import the styles that PrimeVue requires at the top of your support file and use any div wrappers that your styles expect. For Vuetify, they expect all users to wrap their applications in

<VApp>

-- other UI frameworks have different requirements.

The way to debug this is by looking at what you do in your

main.js

and making sure all of that is happening within the Cypress iframe.

Hello. I'm using cypress with vite to test vue components. So far so good, but I have to use h to test my slots. Which is fine for simple things but I've no idea get scoped slots running with that method and I'd rather have template strings anyway. But I would get the very unhelpful error "Cannot convert undefined or null to object" when using template strings. I seem to be missing the vue-template-compiler somehow. Where and how do I have to add this to my config?

@dazzling-angle-28206 do you use vue 2 or vue 3? The two are a bit different

vue3. is vue2 with vite even a thing?

Hello everyone, has anyone had experience with nuxtjs/vuex ? I have to mount a component that has a computed property that gets data from store but I can't mount it. All of the examples that I could find on the internet was based on spa with vuejs not with nuxtjs and I'm stuck atm. Can anyone help me?

Did you configurate it properly? https://docs.cypress.io/guides/component-testing/framework-configuration#Nuxt

also seems the example project does not have store would be great if they added a store https://github.com/cypress-io/cypress-component-examples/tree/main/nuxt-vue-2-cypress

How would you update the wrapper to use a new slot after it is mounted? I have a component where I'm switching a CSS class if a named slot is used. I want the slot to not be set when the component is mounted, but set it later in the test to make sure the class switching is working. There doesn't appear to be a setProps equivalent method on the wrapper for setting slot content.

Hi all! Just want to ask how you can generate coverage files for a vite vue app. It seems like generating one is a pain in the butt for component testing

Is Cypress/webpack-preprocessor necessary for a Cypress-Nuxt-Vuetify project? I'm having trouble configuring my project and I'm curious if there just isn't a working config for this yet. I saw the Wallslide project from earlier and tried the fixes according to that thread but still not getting the vuetify components to appear with their styling. Just barebones HTML. Thanks in advance for any help. This is specifically for component testing with npx cypress open-ct

I have some stuff in this article that might help with the Vuetify styling part: https://css-tricks.com/testing-vue-components-with-cypress/#aa-importing-vuetify I haven’t used nuxt and cy myself before though.

Thank you for the reply and help! This is actually the article I had been referencing while trying to make the connection. I'll go back over it and see if I missed something or get a new lead. Thanks again!

Hi I just want to know if this is known issue about stubbing ES modules in component testing?

Hi guys Has anybody had success testing Vuetify/NativeUI or other component libraries with Cypress Component testing?

I believe with version 9 module import mocking is not working in the component runner, and works in the e2e runner. There is a defect somewhere, and I might have either entered it or commented on it.

I've tested Vuetify, here's an example repo Bart made: https://github.com/elevatebart/cy-ct-vuetify and a writeup I did https://css-tricks.com/testing-vue-components-with-cypress/ The Vuetify project itself has some nice looking Cy component tests on the

next

branch, eg https://github.com/vuetifyjs/vuetify/blob/next/packages/vuetify/src/components/VBadge/__tests__/VBadge.spec.cy.tsx