search

cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
46.72k stars 3.16k forks source link

vite-dev-server "process is not defined" when attempting to execute vue test script #17902

Closed alanhumphrey closed 1 year ago

alanhumphrey commented 3 years ago

Current behavior

I'm running the example project found here:

https://github.com/cypress-io/cypress-component-examples/tree/main/vite-vue

When I run cypress open-ct the test browser opens. Selecting the HellowWorld.spec.js test results in a: Reference Error "process is not defined" message.

The console shows:

5cypress_runner.js:194180 Uncaught TypeError: Cannot read property 'emit' of undefined
    at Socket.<anonymous> (cypress_runner.js:194180)
    at Socket.../../node_modules/component-emitter/index.js.Emitter.emit (cypress_runner.js:30628)
    at Socket.emit (cypress_runner.js:202114)
    at Socket.emitEvent (cypress_runner.js:201863)
    at Socket.onevent (cypress_runner.js:201850)
    at Socket.onpacket (cypress_runner.js:201814)
    at Manager.../../node_modules/component-emitter/index.js.Emitter.emit (cypress_runner.js:30628)
    at Manager.emitReserved (cypress_runner.js:202127)
    at Manager.ondecoded (cypress_runner.js:201406)
    at Decoder.../../node_modules/component-emitter/index.js.Emitter.emit (cypress_runner.js:30628)
    at Decoder.add (cypress_runner.js:202440)
    at Manager.ondata (cypress_runner.js:201398)
    at Socket.../../node_modules/component-emitter/index.js.Emitter.emit (cypress_runner.js:30628)
    at Socket.onPacket (cypress_runner.js:199329)
    at WS.<anonymous> (cypress_runner.js:199138)
    at WS.../../node_modules/component-emitter/index.js.Emitter.emit (cypress_runner.js:30628)

The stack trace is:

   at node_modules/@babel/types/lib/definitions/core.js (http://localhost:3000/__cypress/src/node_modules/.vite/@cypress_vue.js?v=a27e8a53:6670:22)
    at __require (http://localhost:3000/__cypress/src/node_modules/.vite/chunk-75565K3H.js?v=a27e8a53:12:45)
    at node_modules/@babel/types/lib/definitions/index.js (http://localhost:3000/__cypress/src/node_modules/.vite/@cypress_vue.js?v=a27e8a53:9637:6)
    at __require (http://localhost:3000/__cypress/src/node_modules/.vite/chunk-75565K3H.js?v=a27e8a53:12:45)
    at node_modules/@babel/types/lib/builders/builder.js (http://localhost:3000/__cypress/src/node_modules/.vite/@cypress_vue.js?v=a27e8a53:9666:25)
    at __require (http://localhost:3000/__cypress/src/node_modules/.vite/chunk-75565K3H.js?v=a27e8a53:12:45)
    at node_modules/@babel/types/lib/builders/generated/index.js (http://localhost:3000/__cypress/src/node_modules/.vite/@cypress_vue.js?v=a27e8a53:9954:21)
    at __require (http://localhost:3000/__cypress/src/node_modules/.vite/chunk-75565K3H.js?v=a27e8a53:12:45)
    at node_modules/@babel/types/lib/utils/react/cleanJSXElementLiteralChild.js (http://localhost:3000/__cypress/src/node_modules/.vite/@cypress_vue.js?v=a27e8a53:10720:23)
    at __require (http://localhost:3000/__cypress/src/node_modules/.vite/chunk-75565K3H.js?v=a27e8a53:12:45)
From previous event:
    at Object.runScripts (http://localhost:3000/__cypress/runner/cypress_runner.js:182127:22)
    at $Cypress.onSpecWindow (http://localhost:3000/__cypress/runner/cypress_runner.js:171108:19)
    at <unknown> (http://localhost:3000/__cypress/src/@fs/F:/audubon/cypress-example/vite-vue/node_modules/@cypress/vite-dev-server/client/initCypressTests.js:22:18)

Desired behavior

The test should execute

Test code to reproduce

See above - I'm using the example code. My only modification to the code is to add

"cy" : "cypress open-ct"

to the scripts section of package.json

I execute the following from a visual studio terminal

npm run cy

Cypress Version

8.0.0

Other

Here are the dependencies from package.json:

 "dependencies": {
    "@cypress/vite-dev-server": "^2.0.2",
    "@cypress/vue": "^3.0.0-beta.3",
    "cypress": "^8.0.0",
    "vue": "^3.1.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.2.1",
    "@vue/compiler-sfc": "^3.1.5",
    "vite": "^2.1.5"
  }
alanhumphrey commented 3 years ago

Should mention this is on Win10

jennifer-shehane commented 3 years ago

Could you make sure to update to the latest versions of the Cypress packages? This issue may have already been fixed. Thanks.

alanhumphrey commented 3 years ago

No problem. Here is my updated package.json:

{ "name": "my-vue-app", "version": "0.0.0", "scripts": { "dev": "vite", "build": "vite build", "serve": "vite preview", "cy": "cypress open-ct" }, "dependencies": { "@cypress/vite-dev-server": "^2.0.7", "@cypress/vue": "^3.0.3", "cypress": "^8.3.0", "vue": "^3.1.5" }, "devDependencies": { "@vitejs/plugin-vue": "^1.6.0", "@vue/compiler-sfc": "^3.1.5", "vite": "^2.1.5" } }

I deleted node_modules and reinstalled.

Error is still happening. Additional information:

alanhumphrey commented 3 years ago

FWIW - the very last error (initCypressTests.js:22:18) comes from

17 if (!CypressInstance) { 18 throw new Error('Tests cannot run without a reference to Cypress!') 19 }

Also - if I run 'cypress open' (not open-ct) all is well

alanhumphrey commented 3 years ago

The repository I was using was deprecated yesterday. Using the recommended repository (https://github.com/cypress-io/cypress-component-testing-examples.git) solves the "cannot read property 'emit' of undefined" error.

The error when the runner tries to execute a test is still there. Stack trace:

at node_modules/@babel/types/lib/definitions/core.js (http://localhost:51857/__cypress/src/node_modules/.vite/@cypress_vue.js?v=c970a3b8:6670:22) at require (http://localhost:51857/cypress/src/node_modules/.vite/chunk-75565K3H.js?v=c970a3b8:12:45) at node_modules/@babel/types/lib/definitions/index.js (http://localhost:51857/__cypress/src/node_modules/.vite/@cypress_vue.js?v=c970a3b8:9637:6) at require (http://localhost:51857/cypress/src/node_modules/.vite/chunk-75565K3H.js?v=c970a3b8:12:45) at node_modules/@babel/types/lib/builders/builder.js (http://localhost:51857/__cypress/src/node_modules/.vite/@cypress_vue.js?v=c970a3b8:9666:25) at require (http://localhost:51857/cypress/src/node_modules/.vite/chunk-75565K3H.js?v=c970a3b8:12:45) at node_modules/@babel/types/lib/builders/generated/index.js (http://localhost:51857/__cypress/src/node_modules/.vite/@cypress_vue.js?v=c970a3b8:9954:21) at require (http://localhost:51857/cypress/src/node_modules/.vite/chunk-75565K3H.js?v=c970a3b8:12:45) at node_modules/@babel/types/lib/utils/react/cleanJSXElementLiteralChild.js (http://localhost:51857/__cypress/src/node_modules/.vite/@cypress_vue.js?v=c970a3b8:10720:23) at require (http://localhost:51857/cypress/src/node_modules/.vite/chunk-75565K3H.js?v=c970a3b8:12:45) From previous event: at Object.runScripts (http://localhost:51857/__cypress/runner/cypress_runner.js:182118:22) at $Cypress.onSpecWindow (http://localhost:51857/__cypress/runner/cypress_runner.js:171099:19) at (http://localhost:51857/__cypress/src/@fs/F:/test/vite-vue/node_modules/@cypress/vite-dev-server/client/initCypressTests.js:22:18)

thegouge commented 3 years ago

I have also run into this problem today with Cypress 8.3.1 on a vite-vue project, also on windows 10

in my project I'm also using cypress to run unit tests on a handful of composibles, and the tests for those work great. So I think this error is tied to the rendering of mounted components to the Vite server

thegouge commented 3 years ago

I rolled back my dependencies, and cypress-ct worked for me, I re-updated my dependencies one by one to see where it would break. and from that testing the issue seems to come from @vue/compiler-sfc

when I upgraded @vue/compiler-sfc from 3.0.5 to 3.2.6 I got the Reference Error "process is not defined" error

KaelWD commented 3 years ago

I'm getting this too. Looking through the stack traces, it goes like this:

@babel/types added process.env.BABEL_TYPES_8_BREAKING in v7.8.0

Not sure why this is needed at runtime, but you can work around it by adding
define: { 'process.env.BABEL_TYPES_8_BREAKING': 'false' } to the vite config.

alanhumphrey commented 3 years ago

Can confirm. Adding the define to vite.config.js solved the problem

haoqunjiang commented 3 years ago

See https://github.com/vuejs/vue-next/issues/4531

  • It can also be fixed in @cypress/vue by shipping an additional ESM bundle for Vite
lmiller1990 commented 3 years ago

Sounds like we should be shipping an additional ESM bundle. I think we already ship one though - what needs to be different about this one?

Here's our rollup config: https://github.com/cypress-io/cypress/blob/develop/npm/vue/rollup.config.js#L47

KaelWD commented 3 years ago

This should be fixed now in Vue 3.2.10

haoqunjiang commented 3 years ago

Sounds like we should be shipping an additional ESM bundle. I think we already ship one though - what needs to be different about this one?

😅 Sorry I missed that. Now I have to dig further to find out why Vite resolved to the CJS build of @vue/compiler-core. It shouldn't happen unless some module in the dependency chain is a CJS module.

haoqunjiang commented 3 years ago

Got it: https://github.com/cypress-io/cypress/blob/e216ae2422706d4f46e6dfa68abe2d589c72cf96/npm/vite-dev-server/src/startServer.ts#L35-L43

haoqunjiang commented 3 years ago

Now that Vue 3.2.10 removes the runtime dependency on @babel/types, I think the workaround is fine. That issue was a real problem anyway for pure CJS packages anyway.

As for removing the CJS alias in vite-dev-server, maybe it can be addressed by adding an esm-browser build for @vue/compiler-core so that the esm-bundler build can have more functionalities.

Let's discuss it in the vue-next repo later.

lmiller1990 commented 3 years ago

Confusing - so it sounds like if you update your deps to the latest version of Vue (3.2.6, for example, and the compiler-sfc, etc etc) everything is okay?

Not clear if anything actually needs to be done in our Vite dev server at this point.

olemarius commented 2 years ago

Been trying to get vue3 vite cypress working, but no matter which version I've tried I can't seem to get rid of this. Does anyone know a version that works with vue >=3.2.0 or if there's any workaround to get around this issue?

Relevant packages: 

"vue": "^3.2.22",
"@cypress/vite-dev-server": "^2.2.1",
"@cypress/vue": "^3.0.5",
"cypress": "^9.1.0",
"@vitejs/plugin-vue": "^1.10.0",
"vite": "^2.6.14",

image

Update: Worked after I removed 

server: {
            port: serverPort,
            strictPort: true,

            https: {
                key: fs.readFileSync('certs/localhost-key.pem'),
                cert: fs.readFileSync('certs/localhost.pem'),
            },
            hmr: {
                host: 'localhost',
                port: 3005,
                protocol: 'wss'
            },
        },

Didn't find a way to change server config option in plugins/index.ts, so I ended up creating seperate vite config files.

alanhumphrey commented 2 years ago

I just created a new project using vite, installed the cypress bits, and it worked. I did have to tweak cypress/plugins/index.js to add startDevServer, but that was just to get cypress open-ct to work.

Anyway, it basically worked out of the box. Is there any chance ../../node_modules/component-emitter is out of date?

lmiller1990 commented 2 years ago

I have seen that emit error before. I think this is a red herring, the error is unrelated.

If you can share your minimal reproduction @olemarius, happy to take a look!

olemarius commented 2 years ago

@lmiller1990 I think you're right, it's unrelated. It worked after I removed the ssl certs but the emit error persisted if I remember correctly. If you still would like a reproduction I can try to put that together, but can't promise when as things are a bit busy right now.

lmiller1990 commented 1 year ago

No actionable info, closing for now.