fix(webpack-dev-server): touch component-index during onSpecsChange to avoid writing to app file

[astone123]

• Closes Change in test file crashes component tests after upgrading to Mac  #24398
• Closes Cypress Component Tests Not Working after macOS Ventura Upgrade #24876

Additional details

In our Webpack plugin, we have a hook that runs when specs change (files are added or removed). When this happens, we use uTimesSync to update the metadata for a file in @cypress/webpack-dev-server, browser.js. This "tricks" webpack into re-compiling the bundle since a dependency has technically changed.

Something changed with MacOS Ventura where we are no longer able to write to files inside of the Cypress application directory without specific application permissions set up in system preferences (unclear what these actually are - worked for some and not for others). This is despite the user having permission to write to the file, according to the file permissions.

One way to avoid this issue is to, rather than modifying browser.js to trigger a recompilation of specs, modify the component-index HTML file that exists in the project. The component index is a good candidate for this because:

1. We can count on this file to exist because it needs to in order for CT to work.
2. It should always be a dependency of the bundle (so it will trigger a re-compile)
3. We should always be able to write to it (if we don't have permission to write to the project directory I think we have bigger issues).

Steps to test

1. Open a project with CT
2. Run a spec
3. Create a new spec (with create from component flow or something)
4. Try to run that spec
5. Verify that the spec runs correctly (this means that webpack re-compiled)

The bug is a little bit harder to reproduce since you need to be running Ventura. I've been able to repro it by running CT with Real World App. Any time I edit and save a CT spec a couple of times while in open mode, the error will throw for me. I tested the binary on my machine running Ventura with RWA and it worked 👍🏻

How has the user experience changed?

PR Tasks

• Have tests been added/updated?
• [na] Has a PR for user-facing changes been opened in cypress-documentation?
• [na] Have API changes been updated in the type definitions?

[cypress]

8 flaky tests on run #44238 ↗︎

0

5208

74

0

8

Details:

Merge branch 'develop' into astone123/ventura-webpack-permission-testing
Project: cypress	Commit: 137d4d98d7
Status: Passed	Duration: 17:41 💡
Started: Feb 20, 2023 5:44 AM	Ended: Feb 20, 2023 6:02 AM

  e2e/origin/cookie_behavior.cy.ts • 4 flaky tests • 5x-driver-electron

View Output Video

Test
... > same site / cross origin > XMLHttpRequest > sets cookie on same-site request if withCredentials is true, and attaches to same-site request if withCredentials is true
... > same site / cross origin > fetch > sets same-site cookies if "include" credentials option is specified from request, but does not attach same-site cookies to request by default (same-origin)
... > same site / cross origin > XMLHttpRequest > sets cookie on same-site request if withCredentials is true, and attaches to same-site request if withCredentials is true
... > same site / cross origin > fetch > sets same-site cookies if "include" credentials option is specified from request, but does not attach same-site cookies to request by default (same-origin)

  cypress/cypress.cy.js • 3 flaky tests • 5x-driver-electron

View Output Video

Test
... > correctly returns currentRetry
... > correctly returns currentRetry
... > correctly returns currentRetry

  next.cy.ts • 1 flaky test • webpack-dev-server

View Output Video

Test
Working with next-12 > should show compilation errors on src changes		Screenshot

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[lmiller1990]

Nice trick!

Can we check this works with a custom indexHtmlFile? Does this get passed down to in the config correctly?

[lmiller1990]

I tested it, seems to work great. Good fix!

[ZachJW34]

Awesome fix! Only comment is what @warrensplayer brought up in regards to the location of the component-index.html for the unit test.

[lmiller1990]

All good except percy failing to finalize - this happens from time to time - going to merge. Nice fix!