Absolutely

So what you have to do is: - instead of using the normal store - mock the store with a spy mutation - register Vuex in the localVue instance - check that the spy mutation has been called

So here is a more general question. Is using vue test utils along with Cypress totally normal/expected? I know Cypress/vue was built on top of Vue test utils, but I've never been clear on how much should be cypress specific or how much is specific to the vue test utils, or if they can be used together without any unexpected behavior?

when you use

@cypress/vue

mount(), you are calling exactly the vtu mount function https://vue-test-utils.vuejs.org/api/#mount

it takes the same arguments (plus styles) but has a different return type

Ok, and just use cy.stub instead of jest mocks?

Yep !

ok, I'll read this more and see what I can come up with. Thanks!

NP, on my side I will try and create a project with a Vuex store

@User aside from mocking entire file imports (which you shouldn't do when you're component testing) Jest and Mocha (+ Chai, Sinon) are equivalent.

Most anything you can do in Jest you should be able to do in Cypress.

Well, that is good to hear. I'm sure the 'how' will get me for a long time yet, though. I'm not familiar with using jest mocks, to be clear. So @User I've been trying to get this to work for a while and still can't. Maybe I'm doing/missing something dumb. I was just copying what the docs show as best as I could, not really understanding a lot of what is going on, haha. I was also thinking I might need to mock the module, since it appears that EventMenu uses the EventModule, but the docs you sent me didn't seem to go into that in much detail (at the end). A lot of what is in this screenshot I think may only be useful for reference.

Hello, anyone has an example repo using Vuetify And Cypress Component testing? 🙂

Hey! Lol, we have the actual vuetify project with a PR for them 😹

But we can give you an example. It's pretty quick.

I am making an example as we speak

will post back here soon

I am having a quick struggle tonight figuring this one out

Here is what I have so far https://github.com/elevatebart/cy-ct-vuetify/

Not brilliant yet

@User if you have some brilliant ideas, feel free to fork and update 😉

Does anyone have any tips for getting WindiCSS to work with Vue 3 + Vite when running both integration tests and component tests? I'm following https://github.com/JessicaSachs/cypress-loves-vite, which has

import 'virtual:windi.css'

in the support file (https://github.com/JessicaSachs/cypress-loves-vite/blob/develop/cypress/support/index.js). This works great when running component tests, but throws an error:

Module not found: Error: Can't resolve 'virtual:windi.css'

when trying to run integration tests. I've tried making that a dynamic import that only executes for component tests, like:

if (window.Cypress.testingType === 'component') {
  import('virtual:windi.css')
}

But it still throws the error.

(Sidenote, the

vite-plugin-windicss

config in the Cypress plugins file (https://github.com/JessicaSachs/cypress-loves-vite/blob/develop/cypress/plugins/index.js) doesn't seem to have any effect on integration tests or component tests, at least for my project)

I believe you would want to have 2 separate support files

1 for e2e and one for component testing

use the 2 overrides that appeared in 7.0

What you would do is something like

json
{
"e2e": { "supportFile": "cypress/support/e2e.ts" },
"component": { "supportFile": "cypress/support/component.ts" },
}

Awesome, that was it 🙂 Thanks so much!