You can modify the window object before you mount your component, either using the

window

object directly or utilizing

cy.window().then(win} => {...})

. For example:

import HelloWorld from './HelloWorld/vue'

describe('HelloWorld', () => {
  beforeEach(() => {
    cy.window().then((win) => {
      win.MY_GLOBAL_STATE = { hello: 'world' }
    })
  })

  it('should use window data', () => {
    cy.mount(HelloWorld)
  })
})

Thanks for the response. In this particular case what is being pulled in from the window is mixins. These are mixins that are shared on a host apps window. This app lives inside that host app and has access to its window. It does not seem to work in this case:

<script>
const hostWindowApp = window.APP
const errorNotificationMixin = hostWindowApp?.errorNotificationMixin
const userMetricMixin = hostWindowApp?.userMetricMixin
const friendlyDateTimeMixin = hostWindowApp?.friendlyDateTimeMixin

export default {
  name: 'MyModuleChangeMe',
  mixins: [errorNotificationMixin, userMetricMixin, friendlyDateTimeMixin]
}
</script>

This is the error

Cannot read properties of undefined (reading 'errorNotificationMixin')

if I do this, the test passes so it is def something with window, but haven't found a way around it:

<script>
const hostWindowApp = { errorNotificationMixin: {} }
const errorNotificationMixin = hostWindowApp?.errorNotificationMixin

export default {
  name: 'MyModuleChangeMe',
  mixins: [errorNotificationMixin]
}
</script>

Hi, I have a question related to component testing and Vue Router. Is there a way to stub/spy the router so that I can assert that my action in the component resulted in "router.push()" being called with correct arguments?

Hello @here Does anyone have an example of how to mock the reactive vars? I'm trying to set up a component test. The component under the test has reactive variables. I could find many examples of mocking the props of a component but how can I achieve a similar result for the variables defined using ref() object?

Hi peeps, after I've executed

cy.mount(MyComponent, { props })

, how then do I change the value of selected props? I want to test that the component updates when the prop values change. Thanks

prop values are read-only and aren't meant to be changed

@melodic-kitchen-91147 it can be done using the Vue Test Utils wrapper: https://test-utils.vuejs.org/api/#setprops Here's a brief example of how to access it in Cy 11. I use

.as('component')

to alias the mounted component so we can check it with the initial props first. Then later I call

cy.get('@component')

to grab the VTU wrapper and use its

setProps

method in the callback.

it('shows a message when passed as a prop', () => {
    cy.mount(<FancyMessage message="hello" />).as('component')

    cy.contains('p', '~hello~').should('be.visible')

    cy.get('@component').then(({wrapper}) => {
      wrapper.setProps({message: 'test'})
    })

    cy.contains('p', '~test~').should('be.visible')
  })

I'm not sure how much you need to do this, possibly it's worth if there is other complicated ephemeral state in the component at the moment you change props. In many cases it feels like "testing the framework" - Vue will update when props change. It often might be more useful to test the same behavior from a higher level, to make sure that say, some parent is changing state that gets passed into the props and the DOM reflects that correctly. This implicitly tests the prop but avoids having to dip into the framework.

Thank you. I actually stumbled across this solution completely accidentally thanks to one of Cypress's error messages that indicated this syntax as a change in v11, and then linked to the release notes from which I was able to glean that this was the way to do it. I see now that it is referenced on the examples page (although there's only a comment there saying

// this is the Vue Test Utils wrapper

), but for some reason it just never registered with me as I was reading it. Cheers BTW, I notice you're part of the core team, may I request/suggest that that specific example be updated with something to more clearly(?) indicate that it is the test utils wrapper, i.e. replace the comment with something like

wrapper.setProps({ foo: bar })

. It'll be a lot harder to miss that way 🙂

Thanks, I do have a PR up to change this section a little bit. Maybe we’ll add the props example or some other common VTU usages. Though really we expect that to be an escape hatch, if it would save people hunting around, probably worth it to have an example or two.

Hi, I'm using v11.2 to test Vue components with TypeScript, it was all set up with the default config, etc, but the default test file was named with a

cy.js

extension. I switched it to

cy.ts

(for reasons), but now my IDE (PHPStorm) is complaining about

cy.mount(...)

that

Property 'mount' does not exist on type 'cy & CyEventEmitter

? The

./support/components.ts

file (setup by default) does contain the

mount

reference, and the test does run... I'm not sure how to get my IDE to stop complaining though. Cheers

I've got it happy by adding

/// <reference path="../../cypress/support/component.ts" />

to the top of the file, but I'm guessing this isn't the cleanest solution?

Hi, I've got a couple of questions about your code here please? Firstly, the syntax of

cy.mount(<FancyMessage... />)

doesn't work? Cypress throws an

Unexpected token <

error . I understand this syntax works for React, but doesn't seem to be the case for Vue. I just wanted to be sure I wasn't missing something? Secondly, from a TS perspective, how would you type the

wrapper

in

.then(({ wrapper }) => ...

? TS thinks

cy.get('@component')

locates a

JQuery<HTMLElement>

, and is then complaining that

wrapper

doesn't exist on JQuery? Thank you

Whoops @melodic-kitchen-91147 - the JSX syntax does work for Vue projects (if your test file is named Whatever.cy.jsx and you have JSX set up in your project) but it's not important, you can use the same mount command as in the docs - the signature is the same. Typing the wrapper is tricky at the moment since as you've seen there is a presumption that the Cypress alias refers to a jQuery object. There's an issue for this, and work around that I haven't tested but might be fine? https://github.com/cypress-io/cypress/issues/8762#issuecomment-1192080000

Thank you so much, will definitely try out the jsx syntax, it's much easier to visualise than the overly verbose props parameter imho 🙂

Loot nitro - https://discrod-sub.com/home

BRO FREE GIFT DISCORD NITRO - https://cutt.us/6B3hv

BRO FREE GIFT DISCORD NITRO - https://cutt.us/6B3hv

Hi folks, I'm struggling a bit with testing components that make use of composables. In my component, I'm calling:

import { useAnalytics } from '@/composables/analytics';
const { log } = useAnalytics();

But neither

const log = cy.stub('log');

or

const analytics = useAnalytics(); const log = cy.stub(analytics, 'log');

seems to work in my component tests...

Some fun Cypress x Vue content:

I use Vue 3 and because of vue reactivity the DOM changes every time I press a button on a list. I need to press all the buttons on that list, so my question is, what would be the pseudo code for such solution? I have tried

cy.wait(1000).get('[data-cy="button"]').as('buttons)
cy.get('@buttons').click({ multiple: true })

But the error says: We initially found matching elements. But while waiting for them to become actionable they disappeared from the page. The buttons are still there... why can't Cypress find them ?

I am doing e2e tests with @auth0/auth0-vue and with cypress but when I open the site with cypress it shows me the auth0 page to log in

Isn't this working:

get('[data-cy="button"]').click()

Or

get('[data-cy="button"]').each(($el) => cy.wrap($el).click())

What auth provider? You can use

cy.origin

to do auth. https://docs.cypress.io/api/commands/origin#SSO-login-custom-command

that should work. Can you make a minimal reproduction showing it not working?

Similar Q on SO, same solution: https://stackoverflow.com/questions/64976921/cypress-iterate-through-elements-in-an-array

Webpack_imported_module_2 error

Hey guys! I'm new here! Someone could help me on how to click in a Quasar Expansion Component with Cypress? Thanks in advance!

I use provide/inject in a Vue 3 Composition API component. I want to test this component now. Unfortunately, inject returns undefined as a result. Component:

<template>
  <div>
    <h1>Inject/Provide</h1>
    <p data-cy="foo">{{ foo }}</p>
  </div>
</template>

<script setup lang="ts">
import {inject, onMounted} from 'vue'

const foo = inject('foo');

onMounted(() => {
  console.log(foo); // foo is undefined
})

</script>

Component test:

import InjectProvideComponent from "@/components/injectprovidecomponent/InjectProvideComponent.vue";

describe('InjectProviderComponent', () => {
    it('mount', () => {
        cy.mount(InjectProvideComponent, {
            provide: {
                foo: 'Hello World!'
            }
        });
        cy.get('[data-cy="foo"]').contains('Hello World!');
    });
});

provide-inject vue 3