Vue-cli: Cypress version

[leads]

What problem does this feature solve?

Hi. The Cypress version is still on 3.8.3. Can this be upgraded? Thanks!

What does the proposed API look like?

"cypress": "^4.11.0", (I think is the latest version)

[damien-carcel]

It is also to notice that Cypress 3.8.3 has lodash as a dependency locked to the version 4.17.15, which has a known vulnerability => https://github.com/lodash/lodash/issues/4744.

Upgrading to Cypress 4 would fix that too.

[Benoit-Vasseur]

+1 For this request. We need cypress ^4.11.0 to have the support of the experimentalShadowDomSupport flag : https://docs.cypress.io/guides/references/experiments.html#Shadow-DOM
I had to use the resolutions field of the package.json with yarn for now but it is definitely not an ideal solution.

[damien-carcel]

Just looked at current pull-request, it is already a work in progress => https://github.com/vuejs/vue-cli/pull/5139

[spikyjt]

It's now in a catch 22 of a new major release of Cypress is coming out soon, because it took so long to approve the PR to upgrade! It would be better if Cypress was a peer dependency, so that we can choose the version we want, and those who need to maintain BC can still do so.

[ZwapKillrath]

It's now in a catch 22 of a new major release of Cypress is coming out soon, because it took so long to approve the PR to upgrade! It would be better if Cypress was a peer dependency, so that we can choose the version we want, and those who need to maintain BC can still do so.

Oh yes...Good idea....

[Maxim-Mazurok]

The current version is 5.3.0 and it's already merged in dev branch: https://github.com/vuejs/vue-cli/blob/3f7fb4fd9c392ec3d46904a106a312173ce84b0d/packages/%40vue/cli-plugin-e2e-cypress/package.json#L27

Please, can we release it? At least to the @next or @beta or whatever?

I can't use cypress 3 in WSL 1 and WSL 2, while 5.3.0 works for me.

And I can't install this plugin from github, because I use npm, which doesn't support installing from monorepo. Looks like the only way for me is to use npm-force-resolutions.

Or, I can switch from npm to yarn, which supports workspaces

[Maxim-Mazurok]

This is not a solution:

Or, I can switch from npm to yarn, which supports workspaces

Because yarn v1 doesn't support workspaces. And Vue doesn't work with yarn v2 which supports workspaces.

[trungdang194]

I tried to use npm-force-resolutions to force cypress newest version is 5.5.0, but it does not work, still stuck in ^3.8.3.
I need cypress to be version 5.x.x to use cy.route2 feature

[Maxim-Mazurok]

It definitely worked for me.
Make sure that you're using npm and not yarn. Make sure that you've added "preinstall": "npx npm-force-resolutions" script. Make sure that you have package-lock.json file and that you're running npm install and not npm ci. Otherwise, share your repro so that I can help you.

[trungdang194]

I followed the guidance from npm-force-resolutions, added in package.json "resolutions": { "cypress": "5.5.0" }, "script": { "preinstall": "npx npm-force-resolutions"}, tried the second times but unfortunately, it's not worked.
You can reproduce with packages installed: "cypress": "5.5.0", "npm-force-resolutions": "0.0.3", "@vue/cli-plugin-e2e-cypress": "4.5.8"

[Maxim-Mazurok]

What error are you getting?

[trungdang194]

Due to cli-plugin-e2e-cypress still use cypress v3.8, I cannot start e2e testing , cy.route2 require cypress v5.x

[Maxim-Mazurok]

Try to remove your node_modules and run npm install again

[trungdang194]

Try to remove your node_modules and run npm install again

Great, it works now, thank you.

[koooge]

It does not work for me.

> npx npm-force-resolutions

npx: installed 5 in 1.567s

> [email protected] postinstall /path/to/node_modules/@vue/cli-plugin-e2e-cypress/node_modules/cypress
> node index.js --exec install

/path/to/node_modules/any-observable/register.js:29
    throw new Error('Cannot find any-observable implementation nor' +
    ^

Error: Cannot find any-observable implementation nor global.Observable. You must install polyfill or call require("any-observable/register") with your preferred implementation, e.g. require("any-observable/register")('rxjs') on application load prior to any require("any-observable").
    at loadImplementation (/path/to/node_modules/any-observable/register.js:29:9)
    at /path/to/node_modules/any-observable/loader.js:30:18
    at Object.<anonymous> (/path/to/node_modules/any-observable/index.js:2:39)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/path/to/node_modules/@samverschueren/stream-to-observable/index.js:2:20)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)

[Maxim-Mazurok]

Yeah, I had this one as well, but not sure how to fix it. Perhaps, a different version of plugin or cypress will work. Maybe removing node_modules will help.

[trungdang194]

It does not work for me.

> npx npm-force-resolutions

npx: installed 5 in 1.567s

> [email protected] postinstall /path/to/node_modules/@vue/cli-plugin-e2e-cypress/node_modules/cypress
> node index.js --exec install

/path/to/node_modules/any-observable/register.js:29
    throw new Error('Cannot find any-observable implementation nor' +
    ^

Error: Cannot find any-observable implementation nor global.Observable. You must install polyfill or call require("any-observable/register") with your preferred implementation, e.g. require("any-observable/register")('rxjs') on application load prior to any require("any-observable").
    at loadImplementation (/path/to/node_modules/any-observable/register.js:29:9)
    at /path/to/node_modules/any-observable/loader.js:30:18
    at Object.<anonymous> (/path/to/node_modules/any-observable/index.js:2:39)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/path/to/node_modules/@samverschueren/stream-to-observable/index.js:2:20)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)

Yeah, remove node_modules first, if it still happen, then please provide more information: What command did you run, also what is in your package.json?

[ZwapKillrath]

Install rxjs as a dev dependency worked for me

[JessicaSachs]

Hey all, our major release cadence is every 12 weeks. Becoming a peer dependency would be most helpful for us. Vue CLI is in a bind because Cypress releases breaking changes, and Vue CLI does not want to break users' codebases.

I'm looking into this failure right now.

[JessicaSachs]

We're gonna discuss with @sodatea tomorrow-ish (specifically, @elevatebart will). I have a non-Vue CLI workaround for those that are interested:

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "test:e2e": "start-server-and-test 'yarn serve' :8080 'cypress open'",
    "test:e2e:ci": "start-server-and-test 'yarn serve --mode=production' :8080 'cypress run'"
  },
  "devDependencies": {
    "cypress": "^5.6.0",
    "start-server-and-test": "^1.11.5"
  }
}

The start-server-and-test package is what we use internally and is built + maintained by a Cypress core member. It's useful for all sorts of stuff, but especially for E2E.

[layanto]

We're gonna discuss with @sodatea tomorrow-ish (specifically, @elevatebart will). I have a non-Vue CLI workaround for those that are interested:

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "test:e2e": "start-server-and-test 'yarn serve' :8080 'cypress open'",
    "test:e2e:ci": "start-server-and-test 'yarn serve --mode=production' :8080 'cypress run'"
  },
  "devDependencies": {
    "cypress": "^5.6.0",
    "start-server-and-test": "^1.11.5"
  }
}

The start-server-and-test package is what we use internally and is built + maintained by a Cypress core member. It's useful for all sorts of stuff, but especially for E2E.

This is exactly what I have done to decouple Vue cli and cypress. First I create new project using Vue cli with cypress e2e (so that Vue cli creates all the config files for cypress). Then I manually delete Vue cli cypress plugin in package.json and add start-server-and-test as per what @JessicaSachs said above.

[JessicaSachs]

@layanto this is what I do as well.

My teammate @dmtrKovalenko has an outstanding create-cypress-tests CLI scaffolder that’s in the middle of PR Review. It’s largely inspired by Vue CLI. Unsure how I’m going to marry the two of them yet, or consume it sensibly, but some unification would make sense.

[sodatea]

A temporary workaround shipped: https://github.com/vuejs/vue-cli/releases/tag/v4.5.9

[sodatea]

Updated in v5.0.0-alpha.0