nx: Cypress Component testing not able to load assets

Okay folks I think we got the root issue. I still have a handful of things I need to test, but I at least understand what the issues is.

Basically cypress opens in the Nx project root. but when in an angular cli project it opens in the workspaceRoot (root of the repo). The component-testing preset for angular provides the path offsets to correctly resolve paths which seem to have only been kind of working. As within the @cypress/webpack-dev-server package the pathing causes the angular webpack utils to use the project root as the workspace root so while it’s able to build the webpack config the assets get mapped to a different url where they aren’t getting proxied as expected. i.e. __cypress/src/assets instead of assets

I’ll make a PR to Cypress that will allow nx to provide it’s own workspace root to use which should fix the issue. I still have a bunch of testing I need to do to make sure this will in fact fix the issues for both app and lib project component testing without breaking existing angular cli workspace testing. This fix also requires some change on the Nx side so all of that will be get coordinated and I’ll keep y’all updated on where everything lands.

Please retry with latest Nx and Cypress. I believe the issue has been resolved as I cannot reproduce the issue any more. Things I’ve tried is using stylePreprocessorOptions/img tag asset loading, HttpClient asset load all work across libs/apps.

Here is the repo I used for reference. https://github.com/barbados-clemens/cy-asset-style-demo

I’m going to mark the issue as blocked until there is a repro that shows this not working on Nx v15.6+ and Cypres v12.3+.

Odds are this was an issue in cypress v10/v11 but was fixed in v12 and/or in combination with angular v15.

I’ll still work on making some e2e tests in the Nx repo to make sure this doesn’t regress and to fix a couple other smaller issues like

ERROR in polyfills
       Module not found: Error: Can't resolve '../../zone.js' in

you might see when using component testing but major issues of asset loading look to be resolved.

@barbados-clemens i can send you zipped code on slack if you want?

do you have a repo I can look at @jerkovicl?

I think I’ve tracked down to the actual values angular uses and working on understanding more of the problem.

from what i’ve seen the default "apps/demo/src/assets" turns into

 {
      "glob": "**/*",
      "input": "../../apps/demo/src/assets",
      "output": "src/assets"
    }

and

 {
      "glob": "**/*",
      "input": "apps/demo/src/assets",
      "output": "assets"
 }

is turning into

 {
      "glob": "**/*",
      "input": "../../apps/demo/src/assets",
      "output": "assets"
 }

under the hood in the angular builder.

so when running Cypress CT the path to assets is mapped to src/assets instead of just assets

Or at least that’s where I ended yesterday off and working on debugging more today to see what exactly is happening.