Cypress Component Tests Not Working after macOS Ventura Upgrade

[mschaefer-gresham]

Current behavior

After upgrading to Ventura, Cypress component testing has stopped working. I've seen other related posts. I tried givng iTerm Full Disk Access, App Management rights, and added it to Developer Tools (all under Privacy and Security).

Cypress hangs here (yarn cypress open --component):

I had node 16 installed before upgrading to Ventura. With node 16, yarn cypress run --component --browser chrome still works. But yarn cypress open --component hangs as above. I installed node 19 after upgrading to Ventura and both commands hang using version 19.

Using node 19, yarn cypress run --component --browser chrome hangs here on the first test:

Another member on my team only had to give App Management rights to iTerm and Webstorm and Cypress is working. But he didn't install a new node version after upgrading or make any other changes. I had also freshly cloned our repo and did a yarn install after the upgrade which he didn't do. I'm guessing that if he made similar changes he would have the same issues.

If I run sudo yarn cypress open --component the tests load, but when I try to run one, it just hangs here:

I also cleared the Cypress cache and re-installed.

Any suggestions would be welcome.

Debug logs

No response

Cypress Version

10.11.0

Node version

19.1.0

Package Manager

yarn

Package Manager Version

1.22.19

Operating system

Mac

Operating System Version

ventura 13.0.1

Other

No response

[mike-plummer]

Hi @mschaefer-gresham , sorry to hear you're having trouble. I have a couple requests:

• Could you run Cypress in debug mode mode and print or attach the entire set of logs here?
• Could you provide a bit of info about what sort of project you're running component tests on? Create React App? Next? Vue?
• Do you see similar behavior for other browsers (Electron, for example)?
• What about if you step through the Cypress launch steps manually? (not provide the --component or --browser flags via CLI and instead use the UI)
• Can you try eliminating non-default apps from the execution chain to see if there's an OS permissions issue somewhere? For example, use Terminal instead of iTerm

[mschaefer-gresham]

Hi @mike-plummer

Could you run Cypress in debug mode mode and print or attach the entire set of logs here?

Can you be a bit more specific about what you would like me to do? I see that you can use the .debug() function inside a test, but my tests aren't even loading.

Could you provide a bit of info about what sort of project you're running component tests on? Create React App? Next? Vue?

React App with webpack, not Create React App.

Do you see similar behavior for other browsers (Electron, for example)?

Yes, Electron hangs on the "Loading your tests" page. Using the Firefox, it hangs on "Opening component testing in Firefox".

What about if you step through the Cypress launch steps manually? (not provide the --component or --browser flags via CLI and instead use the UI)

If I run "cypress open", then using Chrome it doesn't even open the tests. It hangs on "Opening component testing in Chrome".

Can you try eliminating non-default apps from the execution chain to see if there's an OS permissions issue somewhere? For example, use Terminal instead of iTerm

When using Terminal the os indicated that Terminal had no permissions access or modify apps. So I clicked Allow and was directed the App Management settings and I enabled Terminal:

But the result is the same. Cypress hangs on the "Your tests are loading..." page:

[mike-plummer]

Sorry @mschaefer-gresham , I wasn't very clear on the debug logs part. It is possible to enable 'debug-level' logging when running Cypress which gives us more insight into the internal workings of the app. Hopefully that will give us a clue why your tests are hanging

[mschaefer-gresham]

Here is what I ran:

export DEBUG=cypress:* cypress run
sudo yarn unit:watch 

Output:

yarn run v1.22.19
$ cypress open --component
Missing baseUrl in compilerOptions. tsconfig-paths will be skipped
[@cypress/webpack-dev-server]: removing HtmlWebpackPlugin from configuration.
[@cypress/webpack-dev-server]: removing HotModuleReplacementPlugin from configuration.
<i> [webpack-dev-server] [HPM] Proxy created: /api,/auth,/signin-oidc,/signout-callback-oidc  -> https://localhost:8080
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:3000/, http://[::1]:3000/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/matthew/workspace/electra-web/investment-manager-control-ui/app/public' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
<w> [ReactRefreshPlugin] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly.
GET /__/ 200 4.941 ms - -
GET /__/assets/index.fca57d40.css 200 1.166 ms - -
GET /__/assets/polyfills.f25d072f.js 200 2.884 ms - -
GET /__/assets/index.7f41798a.js 200 2.283 ms - -
GET /__cypress/runner/cypress_runner.css 200 1.483 ms - -
GET /__/assets/Specs.3f453167.js 200 1.606 ms - 485
GET /__/assets/CreateSpecModal.315eb5ce.css 200 4.542 ms - 368
GET /__/assets/Index.0a84bae0.css 200 4.643 ms - -
GET /__/assets/ResultCounts.d1534e71.js 200 4.485 ms - -
GET /__/assets/CreateSpecModal.27959c23.js 200 4.551 ms - -
GET /__/assets/SpecPatterns.cc4f466c.js 200 2.316 ms - -
GET /__/assets/user-outline_x16.9882843e.js 200 2.017 ms - -
GET /__/assets/settings_x16.3332126a.js 200 1.493 ms - -
GET /__/assets/Index.e3a780a5.js 200 4.682 ms - -
GET /__/assets/cypress_s.29af549a.png 200 14.926 ms - 4425
GET /chrome-variations/seed?osname=mac&channel=stable&milestone=108 304 618.895 ms - -
POST /ListAccounts?gpsia=1&source=ChromiumBrowser&json=standard 200 618.486 ms - -
GET /__/assets/chrome.98045c79.svg 200 4.939 ms - -
GET /__/assets/electron.fb07f5cc.svg 200 4.802 ms - -
GET /__/assets/firefox.9be61e66.svg 200 4.717 ms - -
GET /__cypress/runner/cypress_runner.js 200 1.653 ms - -
GET /image/ab67616d0000b273644c510e8d4c02ae69028297 200 632.285 ms - -
GET /v1/pages/ChRDaHJvbWUvMTA4LjAuNTM1OS45OBIQCZn9u06bB-cGEgUNE1Cf1A==?alt=proto 200 615.048 ms - -
GET /__/assets/Runner.d2b9b65e.css 200 1.306 ms - -
GET /__/assets/Switch.0dadfea4.js 200 1.496 ms - -
GET /__/assets/refresh_x16.22a357e3.js 200 1.372 ms - -
GET /__/assets/Runner.297a5a78.js 200 1.954 ms - -
GET /v1/pages/ChRDaHJvbWUvMTA4LjAuNTM1OS45OBIQCUuvX4XcrqZJEgUNN5ze0w==?alt=proto 200 519.985 ms - -
POST /v1:GetModels?key=AIzaSyBOti4mM-6x9WDnZIjIeyEU21OpBXqWBgw 200 586.587 ms - -
GET /__cypress/iframes//Users/matthew/workspace/electra-web/investment-manager-control-ui/app/src/features/workspace/features/WorkspaceNavigation/PaneSelector.cy.tsx - - ms - -
254 assets
2930 modules
webpack 5.74.0 compiled successfully in 69772 ms
GET /v4/threatListUpdates:fetch?$req=Ch0KDGdvb2dsZWNocm9tZRINMTA4LjAuNTM1OS45OBopCAUQBBobCg0IBRAGGAEiAzAwMTABEOSoDxoCGAmTXF0uIgQgASACKAEaKQgBEAQaGwoNCAEQBhgBIgMwMDEwARDVvgsaAhgJJO65FSIEIAEgAigBGicIChAIGhkKDQgKEAgYASIDMDAxMAEQBxoCGAlJJtU-IgQgASACKAEaKQgHEAQaGwoNCAcQBhgBIgMwMDEwARCWmQwaAhgJU6ECyyIEIAEgAigBGicIARAEGhkKDQgBEAYYASIDMDAxMAMQFBoCGAn3uAM0IgQgASACKAMaJwgJEAQaGQoNCAkQBhgBIgMwMDEwARAgGgIYCcbhp40iBCABIAIoARooCAgQBBoaCg0ICBAGGAEiAzAwMTABEMQRGgIYCTKpDmwiBCABIAIoARooCAEQCBoaCg0IARAIGAEiAzAwMTAEEJgwGgIYCTU6NrUiBCABIAIoBBopCA0QBBobCg0IDRAGGAEiAzAwMTABEO_UARoCGAmcqH_BIgQgASACKAEaKAgPEAQaGgoNCA8QBhgBIgMwMDEwARCPcxoCGAli9AoVIgQgASACKAEaKQgDEAQaGwoNCAMQBhgBIgMwMDEwARCEtAsaAhgJRThXLSIEIAEgAigBGikIDhAEGhsKDQgOEAYYASIDMDAxMAEQ3-IGGgIYCfLEn5siBCABIAIoARooCBAQBBoaCg0IEBAGGAEiAzAwMTABEIcWGgIYCYt2c-wiBCABIAIoASICCAE=&$ct=application/x-protobuf&key=AIzaSyBOti4mM-6x9WDnZIjIeyEU21OpBXqWBgw 200 555.814 ms - -

It hangs here:

[mike-plummer]

@mschaefer-gresham I think you may need to tweak the command a bit - we're trying to set the DEBUG environment variable to a value of cypress:*, so assuming cypress is invoked by your yarn test:unit command you would instead do something like this:

export DEBUG=cypress:*
yarn unit:watch

or

DEBUG=cypress:* yarn unit:watch

The goal is to get (a ton) of output that looks like this:

  ...
  cypress:cli spawning Cypress with executable: ~/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/MacOS/Cypress +0ms
  cypress:cli piping child STDERR to process STDERR +16ms
  cypress:ts registering ts-node on directory undefined +0ms
  cypress:ts Running without ts-node hook in environment "production" +46ms
  cypress:server:appdata path: ~/Library/Application Support/Cypress/cy/production/cache +0ms
  cypress:server:appdata path: ~/Library/Application Support/Cypress/cy/production/browsers +37ms
  ...

[mschaefer-gresham]

Here's the output from running:

export DEBUG=cypress:*
yarn unit:watch

Without the sudo it only gets this far:

[debug.txt](https://github.com/cypress-io/cypress/files/10210722/debug.txt)

[mike-plummer]

@mschaefer-gresham I took a look at your logs and didn't see any single smoking gun that would explain the odd behavior you're seeing. I also set up a basic React app on macOS 13.0.1 using Node 19.1.0 and Cypress 10.11.0 and did not see any hangs or issues. At this point the main thing that stands out is the use of sudo you're describing - on a standard Unix (including Mac) system Cypress should not require sudo to execute itself or tests; however; if one of the browsers, Node, or some other system artifact is owned by root or another user then that could explain some of the odd behavior you're seeing (and why it works differently for your coworker). The only thing that I saw in the logs was a potential error running the git executable to get file status (which shouldn't by itself cause issues, but could be a clue), which tells me maybe there are filesystem/executable permission issues at play.

Without a reproducible example to debug through it's difficult to know where to start, but I would see if perhaps Node was accidentally installed via sudo (did you do it via Homebrew, perhaps?). Is your user able to invoke node -v and node -e "console.log('Node successfully ran some code!')" and get valid output (not errors)?

[mschaefer-gresham]

Thank you for investigating. That's unfortunate you didn't find anything. I'm totally stuck at the moment. The tests won't run.

I tried to re-installed Cypress and tried getting a fresh set of node_modules. I also uninstalled nvm & node and re-installed. Not sure what to try now.

[mike-plummer]

@mschaefer-gresham Hmm, this is definitely frustrating, especially since the project seems to work for your coworker. These environment-specific issues are always the hardest to debug. I'll poll some other team members on the chance they notice something in the logs that I missed.

In the interim there are a couple basic troubleshooting steps I can offer:

1. Look at the actual browser devtools console to see if there's a runtime error percolating up there. Can get your tests to the point where they hang at the "Your tests are loading" view and see if there's anything in the browser "console" or "network" tabs?
2. Try bumping your version of Cypress - version 12.0.2 has been out for a few days and there may have been some fixes since v10.11.0 that could resolve your problem.
3. Do you see the same hanging behavior with a brand-new "pure" Cypress react project? There are steps to scaffold a "quickstart" React project here

[mschaefer-gresham]

Here's the outcome of each point above:

1. Nothing in the console and this is the network tab:

2. Same result in my project after upgrading to 12.0.2.

3. Same result using a brand-new pure project (debug log attached).