[solution] Cypress & with Yarn PnP

[OleksandrKucherenko]

Is your feature request related to a problem? Please describe.

The cause:

Error loading the reporter: cypress-mochawesome-reporter

We searched for the reporter in these paths:

 - ~/workspace/telekom.de/hvc-csp/cypress-mochawesome-reporter
 - ~/workspace/telekom.de/hvc-csp/node_modules/cypress-mochawesome-reporter

Learn more at https://on.cypress.io/reporters

Describe the solution you'd like

Step #1: Add mocha a required yarn package, so yarn PnP can resolve it for Cypress.

yarn add --dev mocha

Step #2: create in the root of the project file cypress-mochawesome-reporter.js with content:

const path = require("node:path");
const cwd = process.cwd();

// ref: https://yarnpkg.com/advanced/pnpapi
console.log("cypress-mochawesome-reporter.js: cwd =", cwd);
console.log("cypress-mochawesome-reporter.js: PnP =", path.join(cwd, ".pnp.cjs"));

const pnp = require(path.join(cwd, ".pnp.cjs"));
pnp.setup();
console.log("cypress-mochawesome-reporter.js: pnp =", process.versions.pnp);

// NOTE: at this point require('module') will be already patched by pnp and
// will have findPnpApi method; also `require('pnpapi')` will start to work.

let instance = {};

try {
  // ref: https://yarnpkg.com/advanced/pnpapi#requiremodule
  const { createRequire, findPnpApi } = require(`module`);
  const targetModule = cwd + "/";
  console.log("cypress-mochawesome-reporter.js: targetModule =", targetModule);

  const targetPnp = findPnpApi(targetModule);
  // console.log("cypress-mochawesome-reporter.js: targetPnp =", targetPnp);

  const targetRequire = createRequire(targetModule);
  // console.log("cypress-mochawesome-reporter.js: targetRequire =", targetRequire);

  const resolved = targetPnp.resolveRequest("cypress-mochawesome-reporter", targetModule);
  console.log("cypress-mochawesome-reporter.js: resolved =", resolved);

  instance = targetRequire(resolved);

  console.log("cypress-mochawesome-reporter.js: reporter loaded");
} catch (error) {
  console.error("cypress-mochawesome-reporter.js: error =", error);
}

module.exports = instance;

Follow the original configuration steps.

Describe alternatives you've considered

Refs:

• Cypress and Yarn 2 PNP support cypress-io/cypress#8008
• Cypress and cypress-multi-reporters Yarn 2 PNP support cypress-io/cypress#18922
• https://docs.cypress.io/guides/tooling/reporters#Custom-reporter

Additional context

Cypress reporter executed in "isolated" node instance that does not have enabled P'n'P logic.

[OleksandrKucherenko]

Cleaner version:

const path = require("node:path");
/* ref: https://yarnpkg.com/advanced/pnpapi */
require(path.join(process.cwd(), ".pnp.cjs")).setup();

const REPORTER = "cypress-mochawesome-reporter";

const resolve = () => {
  const cwd = process.cwd() + "/";

  try {
    const { createRequire, findPnpApi } = require(`module`);
    const targetPnp = findPnpApi(cwd);
    const targetRequire = createRequire(cwd);
    const resolved = targetPnp.resolveRequest(REPORTER, cwd);

    return targetRequire(resolved);
  } catch (error) {
    console.error(REPORTER + ".js: error =", error);
    throw error;
  }
};

module.exports = resolve();

[vire]

Cleaner version:

const path = require("node:path");
/* ref: https://yarnpkg.com/advanced/pnpapi */
require(path.join(process.cwd(), ".pnp.cjs")).setup();

const REPORTER = "cypress-mochawesome-reporter";

const resolve = () => {
  const cwd = process.cwd() + "/";

  try {
    const { createRequire, findPnpApi } = require(`module`);
    const targetPnp = findPnpApi(cwd);
    const targetRequire = createRequire(cwd);
    const resolved = targetPnp.resolveRequest(REPORTER, cwd);

    return targetRequire(resolved);
  } catch (error) {
    console.error(REPORTER + ".js: error =", error);
    throw error;
  }
};

module.exports = resolve();

This breaks with new yarn4 PNP api

[LironEr]

if you can open a PR and a test for that, it would be great.
I'm not familiar with Yarn PnP.

[AeiYo]

I have a question. I’m working in a monorepo environment using Yarn Berry 3.x.x with PnP.

Thanks to the code you provided, I successfully generated the report by using the appropriate paths. (Thank you!)

However, when I added import "cypress-mochawesome-reporter/register"; to e2e.ts, Webpack fails to resolve the register path.

How did you resolve the issue with the register?

error code on cli

Oops...we found an error preparing this test file:

  > cypress/support/e2e.ts

The error was:

Error: Webpack Compilation Error
Module not found: Error: Can't resolve 'cypress-mochawesome-reporter/register' in '/Users/projects/partner/apps/@e2e/cypress/support'
    at handle (/Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:212:23)
    at finalCallback (/Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:441:32)
    at /Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:505:17
    at /Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (/Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at Cache.storeBuildDependencies (/Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Cache.js:122:37)
    at /Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:501:19
    at Hook.eval [as callAsync] (eval at create (/Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:498:23
    at Compiler.emitRecords (/Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:919:5)
    at /Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:490:11
    at /Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:885:14
    at Hook.eval [as callAsync] (eval at create (/Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:882:27
    at /Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:2818:7
    at done (/Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:3522:9)
    at Hook.eval [as callAsync] (eval at create (/Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/Library/Caches/Cypress/13.12.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:736:33

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.