yarn 2 - cy.readFile does not respect PnP

[francisu]

Current behavior

When using cypress-react-selector, with yarn 2, running a test with open-ct, I get this error:

vendors~ctChunk-reactdevtools.71f4c4a828a7b7522abe.js:5722 CypressError: cy.readFile("./.yarn/cache/resq-npm-1.10.1-c0eb904091-57458eb232.zip/node_modules/resq/dist/index.js") failed while trying to read the file at the following path:

/Users/francis/temp/test-material-ui/.yarn/cache/resq-npm-1.10.1-c0eb904091-57458eb232.zip/node_modules/resq/dist/index.js

The following error occurred:

"ENOTDIR: not a directory, open '/Users/francis/temp/test-material-ui/.yarn/cache/resq-npm-1.10.1-c0eb904091-57458eb232.zip/node_modules/resq/dist/index.js'"
at http://localhost:54779/__cypress/runner/cypress_runner.js:159601:28
From previous event:
at verifyAssertions (http://localhost:54779/__cypress/runner/cypress_runner.js:159593:85)
at Context.readFile (http://localhost:54779/__cypress/runner/cypress_runner.js:159645:14)
From Your Spec Code:
at $Cy.cy. [as readFile] (http://localhost:54779/__cypress/runner/cypress_runner.js:174899:49)
at Context.push../.yarn/cache/cypress-react-selector-npm-2.3.11-c2cb0b820d-de61e0c96e.zip/node_modules/cypress-react-selector/src/resqInjector.js.exports.waitForReact (http://localhost:54779/__cypress/src/static/js/0.chunk.js:416:6)
at http://localhost:54779/__cypress/runner/cypress_runner.js:173604:15
at tryCatcher (http://localhost:54779/__cypress/runner/cypress_runner.js:26492:23)
at Promise._settlePromiseFromHandler (http://localhost:54779/__cypress/runner/cypress_runner.js:24427:31)
at Promise._settlePromise (http://localhost:54779/__cypress/runner/cypress_runner.js:24484:18)
at Promise._settlePromiseCtx (http://localhost:54779/__cypress/runner/cypress_runner.js:24521:10)
at http://localhost:54779/__cypress/runner/cypress_runner.js:21174:20

Desired behavior

The test should be successful

Test code to reproduce

To reproduce:

git clone https://github.com/francisu/test-material-ui
git checkout yarn2-readFile
yarn install
yarn cypress open-ct

(will open GUI - Click on the first test)
====> The error will happen at that point

Cypress Version

8.3.1

Other

Here is a transcript of the chat with the creator of yarn 2 about this issue (note the issue reference is in create-react-selector, that was the initial one I filed).

francisu — Today at 9:13 AM
Any idea how to fix this one? Cypress is supposed to have PnP enabled (after 8.1.0) with their WP4 configuration, but it looks like require.resolve() is being passed through without modification. abhinaba-ghosh/cypress-react-selector#230. I tried to unplug the references package, but to no avail.
arcanis — Today at 2:32 PM
What is cy.readFile ? A native function ?
francisu — Today at 2:47 PM
Just a cypress command: https://docs.cypress.io/api/commands/readfile. but the point is it's trying to read from the wrong path, right?
@arcanis
arcanis — Today at 2:50 PM
No, it likely means that it doesn't know how to access the file from within its zip archives
Since the Node fs layer is supposed to support it transparently, it means Cypress is doing something special
Why cy.readFile? Why not fs.readFile?
francisu — Today at 3:15 PM
@arcanis ahh, I see, I was not aware that node fs did this. It ultimately uses fs-extra, which i assume works the same. But it's suspicious that the error is a ENOTDIR. Anyways, it looks like this does not have to do with PnP, so thanks for your help, and I will try and debug it from here.
arcanis — Today at 3:17 PM
Node doesn't do this naturally - it's our custom layer that tells it how to load those files
Without it, the ENOTDIR is expected since foo.zip is in fact not a dir
Now as to why it doesn't work with Cypress, I don't know - never used it myself. Perhaps fs-extra gets executed before our loader can inject the zip support layer ?

[klngrs]

I believe I figured this out. When updating to yarn PNP, I got these errors as well. (Cypress: 9.4.1, cypress-axe: )

All the injectAxe() method does is import axe-core in a fairly awkward manner to the Cypress context. Removing the injectAxe call and Importing "axe-core" in support/index.js file did the trick for me.

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[francisu]

Any version after about 9.x does not support yarn 2 in cypress (because of various open issues), so this cannot be tested against the latest version.

[nagash77]

Hi @francisu , thanks for responding. I will route this to the backlog. In the spirit of transparency I do not see Cypress fixing Yarn 2 support in older versions of Cypress. Any fixes will be made rolling forward.

[francisu]

Hi @francisu , thanks for responding. I will route this to the backlog. In the spirit of transparency I do not see Cypress fixing Yarn 2 support in older versions of Cypress. Any fixes will be made rolling forward.
I agree, we don't care about the old version. Once yarn 2 is fixed for Cypress (in a recent version) then we will move to that version.

[MikeMcC399]

@nagash77

This should probably have the CT Issue related to component testing label attached to it instead of E2E Issue related to end-to-end testing . (yarn cypress open-ct in the repro steps is from the beta version of component testing before it became generally available in Cypress 11.0.0 where it is now run with --component.)

@francisu

We have Cypress 12.x working successfully with Yarn Plug'n'Play in the github-action repository https://github.com/cypress-io/github-action#yarn-plugnplay. This is however demonstrating E2E testing not component testing. As far as component testing is concerned, I think you are right about some open issues which need to be resolved first.

[MikeMcC399]

Cypress needs some more work doing for Yarn Plug'n'Play with Component Testing.

• See also CT dependencies not detected with Yarn Plug'n'Play #26859 reported on Cypress 12.13.0 (still reproducible on Cypress 12.17.0).

[MikeMcC399]

• Cypress config error after CT migration to Yarn Plug'n'Play #26865

is also related.

[MikeMcC399]

@francisu

Considering that the current version of Yarn Modern has now moved to v4 (see blog) there is probably not a lot of benefit to keeping this issue open. The steps to reproduce would also need to be completely reworked to be useful at all.

• Yarn Modern Plug'n'Play incompatibility with CT missing in docs cypress-documentation#5394 serves as a place-holder for Yarn Plug'n'Play issues with Cypress component testing. It hasn't had any feedback from the Cypress team so far though.