CT dependencies not detected with Yarn Plug'n'Play

[MikeMcC399]

Current behavior

If dev dependencies are installed using Yarn Plug'n'Play they are not detected in Component Testing mode. This is the default mode for Yarn Modern (version 2 and later), that is to say for a clean Yarn Modern installation, not an upgrade from Yarn Classic which retains the node-modules configuration.

Desired behavior

Cypress should detect dev dependencies installed with Yarn Plug'n'Play and, in the case of the framework Next.js, Component Testing setup should continue and allow a new example spec to be created and successfully run.

Test code to reproduce

Execute

mkdir cy-yarn-pnp-ct
cd cy-yarn-pnp-ct
git init
yarn set version stable
yarn init -y
yarn add cypress -D -E
yarn cypress open

select Component Testing
Select Next.js, click "Next step"
Follow the instructions to copy and paste
yarn add -D next react react-dom
Note that the Cypress desktop app continues to display the spinner with the message "Waiting for you to install the dependencies..."

Do not click "Skip" and "Continue" otherwise this provokes another error.

• Pending implementation of Add support of Next.JS 14 #28185 use

yarn add -D next@13 react react-dom

in the above.

Cypress Version

First reported on Cypress 12.13.0
Continues to be reproducible on Cypress 13.7.2

Node version

18.16.1 & 20.11.1

Yarn version

3.x and 4.1.0

Operating System

Ubuntu 22.04.4 (and Windows 11)

Debug Logs

No response

Other

For comparison, repeat the test with Next.js and CT using Yarn Modern configured for node-modules instead of the default pnp.

mkdir cy-yarn-node-ct
cd cy-yarn-node-ct
git init
yarn set version berry
yarn init -y
yarn config set nodeLinker node-modules
yarn add -D next react react-dom
yarn add cypress -D -E
yarn cypress open

• Pending implementation of Add support of Next.JS 14 #28185 use yarn add -D next@13 react react-dom in the above.

(don't use yarn cypress open --component)

and

select Component Testing
Next.js,is detected, click "Next step"
Click "Continue", click "Continue"
Select Electron and "Start Component Testing in Electron"
Click "Create new spec"
Click "Create spec"
Click "Okay, run the spec"
Test is successful

Now change to pnp:

yarn config set nodeLinker pnp
yarn install
yarn cypress open

and

select Component Testing

[MikeMcC399]

• Related to closed issue Dependencies are not detected during onboarding when using Yarn 3 #25960

[slikts]

I made a reproduction of the same issue, and the dependencies are also not found if they're regular and not dev dependencies: https://github.com/slikts/cypress-yarn-pnp-repro

[MikeMcC399]

@slikts

Thanks for your comment! I will change the title of this issue so it is more general.

I wrote "dev dependencies" because this is what Cypress recommends during installation e.g. yarn add -D next react react-dom.

I expect that the resolution will be the same whether the dependencies are installed as dev or not.

[mike-plummer]

Thanks @MikeMcC399! There was an attempted fix for PnP support in Cypress v12.10.0 but unfortunately had to roll it back in v12.13.0 due to a different issue. This will likely be related to work needed to resolve #26865.

I will forward this ticket to the appropriate team. They will evaluate the priority of this ticket and consider their capacity to pick it up. Please note that this does not guarantee that this issue will be resolved. The ticket will indicate any status changes. Thanks!

[dkreft-termly]

Is there any update to be had here? I'm trying to set up component testing in a webpack, React, yarn 3 environment, and I'm being told that it can't find dependencies:

I see the following in the console:

[daveoconnor]

I'm hitting up against this issue too.

nodeLinker: node-modules in .yarnrc is a workaround but means you lose pnp benefits of no node_modules in the git repo.