fix: correctly resolve dependencies for CT onboarding when using Yarn Plug n Play

cli/CHANGELOG.md

@@ -8,6 +8,7 @@ _Released 04/11/2023 (PENDING)_
  - Capture the [Azure](https://azure.microsoft.com/) CI provider's environment variable [`SYSTEM_PULLREQUEST_PULLREQUESTNUMBER`](https://learn.microsoft.com/en-us/azure/devops/pipelines/build/variables?view=azure-devops&tabs=yaml#system-variables-devops-services) to display the linked PR number in the Cloud. Addressed in [#26215](https://github.com/cypress-io/cypress/pull/26215).
  - Fixed an issue in the onboarding wizard where project framework & bundler would not be auto-detected when opening directly into component testing mode using the `--component` CLI flag. Fixes [#22777](https://github.com/cypress-io/cypress/issues/22777).
  - Fix an edge case in Component Testing where a custom `baseUrl` in `tsconfig.json` for Next.js 13.2.0+ is not respected. This was partially fixed in [#26005](https://github.com/cypress-io/cypress/pull/26005), but an edge case was missed. Fixes [#25951](https://github.com/cypress-io/cypress/issues/25951).
+ - Correctly detect and resolve dependencies when configuring Component Testing in projects using Yarn's Plug n Play feature. Fixes [#25960](https://github.com/cypress-io/cypress/issues/25960).
 
 **Misc:**
 

packages/launchpad/cypress/e2e/project-setup.cy.ts

@@ -582,6 +582,18 @@ describe('Launchpad: Setup Project', () => {
       cy.findByDisplayValue('pnpm install -D react-scripts react-dom react')
     })
 
+    it('works with Yarn 3 Plug n Play', () => {
+      scaffoldAndOpenProject('yarn-v3.1.1-pnp')
+
+      cy.visitLaunchpad()
+
+      cy.get('[data-cy-testingtype="component"]').click()
+      cy.get('button').should('be.visible').contains('Vue.js 3(detected)')
+      cy.get('button').should('be.visible').contains('Vite(detected)')
+      cy.findByText('Next step').click()
+      cy.findByTestId('alert').contains(`You've successfully installed all required dependencies.`)
+    })
+
     it('makes the right command for npm', () => {
       scaffoldAndOpenProject('pristine-npm')
 

packages/scaffold-config/src/frameworks.ts

@@ -1,10 +1,10 @@
 import fs from 'fs-extra'
+import path from 'path'
 import * as dependencies from './dependencies'
 import componentIndexHtmlGenerator from './component-index-template'
 import debugLib from 'debug'
 import semver from 'semver'
 import { isThirdPartyDefinition } from './ct-detect-third-party'
-import resolvePackagePath from 'resolve-package-path'
 
 const debug = debugLib('cypress:scaffold-config:frameworks')
 
@@ -14,10 +14,42 @@ export type WizardBundler = typeof dependencies.WIZARD_BUNDLERS[number]
 
 export type CodeGenFramework = Cypress.ResolvedComponentFrameworkDefinition['codeGenFramework']
 
+const yarnPnpRegistrationPath = new Map<string, { usesYarnPnP: boolean }>()
+
+async function readPackageJson (packageFilePath: string, projectPath: string): Promise<PkgJson> {
+  if (yarnPnpRegistrationPath.get(projectPath)?.usesYarnPnP) {
+    // using Yarn PnP. You cannot `fs.readJson`, since the module is zipped.
+    // use require.resolve - The PnP runtime (.pnp.cjs) automatically patches Node's
+    // fs module to add support for accessing files inside Zip archives.
+    // @see https://yarnpkg.com/features/pnp#packages-are-stored-inside-zip-archives-how-can-i-access-their-files
+    return require(require.resolve(packageFilePath))
+  }
+
+  return await fs.readJson(packageFilePath)
+}
+
 export async function isDependencyInstalled (dependency: Cypress.CypressComponentDependency, projectPath: string): Promise<Cypress.DependencyToInstall> {
   try {
     debug('detecting %s in %s', dependency.package, projectPath)
 
+    // we only need to register this once, when the project check dependencies for the first time.
+    if (!yarnPnpRegistrationPath.has(projectPath)) {
+      try {
+        const pnpapi = require(path.join(projectPath, '.pnp.cjs'))
+
+        pnpapi.setup()
+        yarnPnpRegistrationPath.set(projectPath, { usesYarnPnP: true })
+      } catch (e) {
+        // not using Yarn PnP
+        yarnPnpRegistrationPath.set(projectPath, { usesYarnPnP: false })
+      }
+    }
+
+    // NOTE: this *must* be required **after** the call to `pnpapi.setup()`
+    // or the pnpapi module that is added at runtime by Yarn PnP will not be correctly used
+    // for module resolution.
+    const resolvePackagePath = require('resolve-package-path')
+
     const packageFilePath = resolvePackagePath(dependency.package, projectPath)
 
     if (!packageFilePath) {
@@ -30,7 +62,7 @@ export async function isDependencyInstalled (dependency: Cypress.CypressComponen
       }
     }
 
-    const pkg = await fs.readJson(packageFilePath) as PkgJson
+    const pkg = await readPackageJson(packageFilePath, projectPath)
 
     debug('found package.json %o', pkg)
 

patches/resolve-package-path+4.0.3.patch

@@ -0,0 +1,19 @@
+diff --git a/node_modules/resolve-package-path/lib/index.js b/node_modules/resolve-package-path/lib/index.js
+index a1463f7..00d83b8 100644
+--- a/node_modules/resolve-package-path/lib/index.js
++++ b/node_modules/resolve-package-path/lib/index.js
+@@ -89,6 +89,14 @@ function resolvePackagePath(target, baseDir, _cache) {
+             // the custom `pnp` code here can be removed when yarn 1.13 is the
+             // current release. This is due to Yarn 1.13 and resolve interoperating
+             // together seamlessly.
++            if (!pnp) {
++                try {
++                    pnp = require(require.resolve('pnpapi', { paths: [baseDir] }))
++                } 
++                catch (e) {
++                    // not in Yarn PnP; not a problem
++                }
++            }
+             pkgPath = pnp
+                 ? pnp.resolveToUnqualified(target + '/package.json', baseDir)
+                 : (0, resolve_package_path_1.default)(cache, target, baseDir);