I've been trying to get cypress component testing working with my nuxt+vuetify project, and am currently running into issues which seem to be related to sass and fibers

I've created a brand new nuxt project with vuetify added as a sort of minimum reproduction, and then used the cypress setup/installation instructions here https://www.cypress.io/blog/2021/04/06/getting-start-with-cypress-component-testing-vue-2-3/

could you guys please help me getting this working with cypress component testing?

@User let me have a quick look

the first thing is in your

plugin.js

file https://github.com/wallslide/cypress-nuxt-vuetify/blob/master/cypress/plugins/index.js Since you are not using the vue cli, you do not have a

@vue/cli-service

meaning that you cannot require a webpack config from there

You probably should use this example instead https://github.com/cypress-io/cypress/blob/develop/npm/vue/examples/nuxt/cypress/plugins/index.js

Regarding vuetify, I made a quick setup here https://github.com/elevatebart/cy-ct-vuetify/ In the

cypress/support

folder, I create a

cy.mount

command that wraps the vuetify theme setup. If you have trouble adapt, don't hesitate to ping me here 😉

Thank you, I'll try those things out!

Hi! I'm trying to get CT working for Ionic-Vue. Suddenly realized that the

plugins/index.js

is not being used because the default folders and files are recreated when I run

npx cypress open-ct

. The individual

"pluginsFile": ...

I've set in

cypress.json

are not used. What is the recommended way to have both e2e and CT plugin files configured in

cypress.json

? This is what I have now:

{
  "e2e": {
    "pluginsFile": "cypress/e2e/plugins/index.js"
  },
  "component": {
    "pluginsFile": "cypress/ct/plugins/index.js",
    "viewportWidth": 375,
    "viewportHeight": 667,
    "componentFolder": "src/components",
    "testFiles": "**/*.spec.{ts,js}"
  }
}

This is my root

cypress

folder (before

npx cypress open-ct

recreates)

This is my root

cypress

folder after

npx cypress open-ct

recreates (

ct

and

e2e

folders folded so it's easier to see)

@User where is your cypress.json? Do you have an example repo where I could see the issue? From here and without more info it looks like your cypress.json is not picked up by open-ct.

My

cypress.json

is in the root of the repo - I can create a reproduction from https://ionicframework.com/vue by starting a new app:

npm install -g @ionic/cli
ionic start --type=vue

And then adding component testing. Repo that reproduces the issue: https://github.com/codeluggage/ionic-5-vue-3-cypress-ct-and-e2e-combined Ionic-Vue has e2e working out-of-the-box. It's the split between an e2e and a CT plugins file that I don't know how to set up. There are no component tests added here, it's a completely basic reproduction case. If you clone that reproduction repo,

npm i

and then run

npx cypress open-ct

, you'll see

cypress/fixtures

and

cypress/support

are created even though

cypress.json

specifies the

"pluginsFile"

. All this said, getting Ionic-Vue to work with CT is a whole separate challenge 😄

Why are you saying that the

pluginsFile

is not being used? I see the support and fixture being created, but not the supportFile. I will create a PR to your repo with a very simple (not useful) CT test. @User did we add ionic to our list of ready made examples?

The `pluginsFile`'s are in

cypress/e2e

and

cypress/ct

- but the new folders are created in

cypress/

. Are you saying that setting a

pluginsFile

is not enough, and I also need to set more directory locations? I.e. it doesn't infer from the location of the

pluginsFile

where all the directories live?

Cypress configuration is done in 3 locations

cypress.json

,

pluginsFile

and

supportFile

You can also configure a

fixturesFolder

to store all the dummy data that you might want to use to display your components in a better shape than empty. You can configure

pluginsFile

,

supportFile

and

ficturesFolder

in your

cypress.json

If you don't set them to false, and the files don't exist in their standard location, Cypress will assume that you do not know about them yet. It will create some nice simple examples for each of them.

Ah that's my misunderstanding then, thank you! I will continue my quest towards Ionic-Vue component testing then.

And also, I think you are using vue 2 version of cypress and your setup is vue 3

Give me just a sec I will create a PR to show you how it works

You were "this" close to done

Yes, I am learning Cypress and trying to figure out component testing for a on-device mobile-first style of framework - when not getting the

pluginsFile

and

support

folder locations mixed up, my main issue has been getting Ionic styles to appear for component tests. As Cypress was set up in the Ionic-Vue starter template, and it seemed to be out of date, I didn't expect things to work perfectly for the new 7+ Cypress yet 🙂

Oh yeah !!! the styles

forgot the styles

All that goes in the

supportFile

you can consider it your testing

main.js

-    "@cypress/vue": "^2.2.3",
+    "@cypress/vue": "^3.0.0",

Interesting - I had the right versions in my private repo. Must not have installed right when I set up the repro-repo 🤔

k

Oh! I was putting it in

/cypress/ct/support/index.js

and couldn't get it to show up, but then realized the issue with the location of

support/

. After that however, I have still not been able to show styles for a stand-alone Vue 3 component in Ionic. A full page for e2e, yes. A single component with CT, no.