Cypress: Cypress and Yarn 2 PNP in a monorepo

[kirill-konshin]

Current behavior:

In Yarn 2 monorepo I have a package a and tests in package b.

When I do

// b/cypress/plugins/index
module.exports = require('a/src/cypress/plugins');

It works as expected.

But

// a/cypress/commands/index
require('a/src/cypress/commands');

Fails with error:

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

  /Users/xxx/b/cypress/support/index.js

The error was:

Error: Cannot find module 'a/src/cypress/support' from '/Users/xxx/b/cypress/support'

Looks like Yarn's Plug'n'play file .pnp.js is not present in second (commands) context.

Desired behavior:

Require of monorepo packages should work.

[kirill-konshin]

@bahmutov @jennifer-shehane please take a look at this issue, this is a huge blocker since there's no known workaround... Yarn 2.1.1 has been recently released, which means it's time to support it. Is there anything I can help?

@arcanis I was trying to find a way to import .pnp.js to enable proper resolution mechanics, but it did not help. Also I've tried https://yarnpkg.com/advanced/pnpify but seems that Cypress is launching some other context (for the browser?) which is not connected to main one, which is aware of PNP.

[bahmutov]

@kirill-konshin you can open a PR with at least some work showing what is going on in CLI when Yarn v2 is used to install Cypress

[kirill-konshin]

@bahmutov here you go https://github.com/kirill-konshin/cypress-test-tiny-yarn-pnp/pull/1/files (branch bug), monorepo is actually not needed, since none of PNP resolutions work.

Just run

$ yarn install
$ yarn test

And get an error:

Error: Cannot find module 'cypress-plugin-snapshots/commands' from '/Users/xxx/cypress-test-tiny-yarn-pnp/cypress/support'

[kirill-konshin]

@bahmutov Any updates? We're completely blocked for almost a month, are there any workarounds or hacks?

[bahmutov]

We did not work on this issue, since it has low priority overall. If you know how to make Cypress NPM module play nicely with Yarn 2, you can open a PR into Cypress with the fix.

PS: The error above seems to indicate a problem not with the Cypress itself, but with another plugin, no?

[kirill-konshin]

@bahmutov I wish I could make a PR, but I am not familiar with Cypress codebase at all.

I know that Yarn 2 is shipped with a set of tools https://next.yarnpkg.com/advanced/pnpapi and https://next.yarnpkg.com/advanced/pnpify that can be used to resolve packages. Superficially it looks like Cypress is creating a new Node (or Browser) context, which is not aware of PNP resolution (unlike the main process).

The error above is a Cypress problem because it would happen with ANY plugin, since it is related to resolution algorithm in general.

Given that this issue has ben linked from another issue, there is some traction, and Yarn 2 is already public, so please consider raising the priority.

[kirill-konshin]

@bahmutov any updates?

[bahmutov]

No updates, we always post PRs or anything done under issues

Sent from my iPhone

On Sep 1, 2020, at 15:33, Kirill Konshin [e-mail] wrote:


@bahmutov any updates?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[kirill-konshin]

@bahmutov is there anything else that I can do to speed it up? Do you have any ETA?

[bahmutov]

I would do a pull request with the solution if yarn 2 is a high priority for your needs

Sent from my iPhone

On Sep 1, 2020, at 16:11, Kirill Konshin [e-mail] wrote:


@bahmutov is there anything else that I can do to speed it up? Do you have any ETA?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[kirill-konshin]

Like I said before, I’m not familiar with Cypress architecture and this bug seems to be buried quite deep, in the code where cypress resolves dependencies. Pnp has to be injected there, or their resolution has to be used. If you can point out the direction or provide a fix - it would be much better.

[bahmutov]

But isn’t it just the part of Cypress CLI which is quite limited?

Sent from my iPhone

On Sep 1, 2020, at 16:24, Kirill Konshin [e-mail] wrote:


Like I said before, I’m not familiar with Cypress architecture and this bug seems to be buried quite deep, in the code where cypress resolves dependencies. Pnp has to be injected there, or their resolution has to be used. If you can point out the direction or provide a fix - it would be much better.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[kirill-konshin]

It is definitely not part of CLI, it is the part that involves browser, because it all works in CLI. Please take a closer look at bug description: it works for plugins and does not work for commands.

[marcneander]

Adding the pnp-webpack-plugin is needed until cypress is using webpack 5.

const webpackPreprocessor = require('@cypress/webpack-preprocessor');
const PnpWebpackPlugin = require('pnp-webpack-plugin');

module.exports = (on) => {
    const options = {
        webpackOptions: {
            resolve: {
                plugins: [
                    PnpWebpackPlugin
                ]
            },
            resolveLoader: {
                plugins: [
                    PnpWebpackPlugin.moduleLoader(module)
                ]
            }
        },
        watchOptions: {}
    };

    on('file:preprocessor', webpackPreprocessor(options));
};

[kirill-konshin]

@marcneander it did work, thanks a lot! Totally makes sense why.

[masihjahangiri]

Cypress should support built-in yarn 2 (PNP algorithm) and it's really important.
We use yarn 2 for the zero-install feature to improve our CI build time, and If we use nodeLinker, we miss that feature.