CypressError: cy.mount()

[alasdairrobinson]

I get CypressError: cy.mount() must be implemented by the user. There are
full instructions for doing so at the following location.

I have implemented a mount in component.ts in the support folder for the tests, pretty much copied from the Cypress documents for implementing component testing on angular. This is on an Nx v15 repo with Cypress 10.10 can anyone help? I'm not getting any hints from google searches.

[blessanm86]

Well, what does ur component.ts look like?

[alasdairrobinson]

import { Type } from '@angular/core'
import { debug } from 'console';
import { mount } from 'cypress/angular'

declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace Cypress {
interface Chainable {
mount: typeof mount
}
}
}

Cypress.Commands.add('mount', (component : string | Type, config) => {
debug();
return mount(component, config);
})

[lmiller1990]

This all looks good to me. Can you do a console.log in here to verify it's actually getting loaded?

[alasdairrobinson]

localhost-1667493764145.log

[alasdairrobinson]

Quite new to Cypress, is that what you're looking for?

[lmiller1990]

No sorry - the supportFile will execute before each of your tests. So, if you do a console.log inside there (say at the top) and you run a test, you should see the console.log in your browser console. If you don't, that suggests the supportFile isn't loading.

It is also possible to explicitly point to a supportFile

export default defineConfig({ 
  component: {
    supportFile: './some/where/component.ts'
  }
})

May be useful for debugging. I wonder if NX does something under the hood that messes with the path 🤔

[alasdairrobinson]

You're right, I put a simple custom log method into component.ts and got a not found error.
Realised that a config file further down the tree was overriding the supportFile value, it's finding the correct support file now, but when I run I get the following error in Component.ts:

Error: Webpack Compilation Error
Nx/node_modules/@angular/common/fesm2015/common.mjs
Module not found: Error: Can't resolve '@angular/core' in 'Nx\node_modules\@angular\common\fesm2015'
resolve '@angular/core' in 'Nx\node_modules\@angular\common\fesm2015'
  Parsed request is a module
  using description file: Nx\node_modules\@angular\common\package.json (relative path: ./fesm2015)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module

I know this is a different failure, but if you've any ideas it would be much appreciated.

[lmiller1990]

Looks like a JS module issue now, I have seen some issues with people using NX as well - let's narrow it down. Can you reproduce with either:

1. fresh repo using Angular + npm
2. fresh repo using Angular + nx
3. ???

I am fairly sure Angular + nx should be working fine - either there's an issue in your specific configuration or an issue with nx/Cypress integration. If we can reproduce in a minimal, new repo, that means it's an issue on our end and we will fix it. If not, it might be specific to your configuration (happy to help with this too, but without more info I can't make many recommendations... a minimal reproduction is probably the only way for me to effectively debug).

What version of Angular and nx are you using? Maybe share your package.json (make sure you are up to date with all versions).

[alasdairrobinson]

Thanks, it looks like we're using Angular 14.2.1
I'm in the process of creating a new Nx monorepo to try and reproduce it, I'll post once it's up and running.

[lmiller1990]

Cool, let me know how you go. The latest versions of Angular should all be 🆗 , like 12/13/14... either nx specific (possible) or unrelated. Hoping we can get to the bottom of this!

[alasdairrobinson]

I've recreated with a fresh repo using Angular + nx. I followed the tutorial here:
https://nx.dev/angular-tutorial
And at the end added 'component.ts' with the mount code to the support folder for the -e2e,
Updated the app.cy.ts file to use the mount for the ui component created in the tutorial.
Ran npx nx e2e <app>-e2e --watch
and get:
Webpack Compilation Error
C:/Users/ARobinson/source/demos/hymans-qa/Nx/node_modules/@angular/common/fesm2015/common.mjs
Module not found: Error: Can't resolve '@angular/core' in 'C:\Users\ARobinson\source\demos\hymans-qa\Nx\node_modules@angular\common\fesm2015'
resolve '@angular/core' in 'C:\Users\ARobinson\source\demos\hymans-qa\Nx\node_modules@angular\common\fesm2015'
Parsed request is a module
using description file: C:\Users\ARobinson\source\demos\hymans-qa\Nx\node_modules@angular\common\package.json (relative path: ./fesm2015)
Field 'browser' doesn't contain a valid alias configuration

[alasdairrobinson]

@lmiller Have you got any thoughts? We're at a point where we can move away from Storybook and use Cypress component tests for our project but that opportunity will close if much more time is invested in testing in Storybok. I'm really keen to do this as there are advantages to moving away from a reliance on Storybook, so I'd really like to work out what's going wrong here.

[lmiller1990]

I tried it.

$ npx create-nx-workspace@latest

 >  NX   Let's create a new workspace [https://nx.dev/getting-started/intro]
✔ Choose your style                     · integrated
✔ What to create in the new workspace   · angular
✔ Repository name                       · angular-nx
✔ Application name                      · angular-nx-app
✔ Default stylesheet format             · css
✔ Enable distributed caching to make your CI faster · No

I then did cd angular-nx and ran npx nx serve angular-nx. My app works.

Then I did npx cypress open --project apps/angular-nx-app-e2e to open the test project. It looks like E2E is already setup out of the box, that's neat. Apparently NX did not support CT since it was in beta - good news, as of 11.0, it's now out of beta, maybe NX will add support soon.

No problem, until then, we need to configure CT manually, but it's quite easy. I clicked Component Testing:

Cypress figured out I was using Angular:

All the deps are there, no need to anything:

I hit continue and got this error:

Error: Could not find angular.json. Looked in /home/lachlan/code/dump/angular-nx/apps/angular-nx-app-e2e and up.

It cannot seem to find angular.json. It looks like I'm not the first one to encounter this: nrwl/nx#1643. We may need nx to help.

I tried making one:

{
  "$schema": "../../node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": false
  },
  "version": 1,
  "projects": {
    "angular": {
      "projectType": "application",
      "root": ".",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {}
      }
    }
  }
}

I got further.

We've all seen this before... webpack is not parsing the @ decorators, I don't know why, though. I will look into this a bit more, but I think we need to work with the nx team.

Related:

nrwl/nx#12960
nrwl/nx#12987
nrwl/nx#12114
nrwl/nx#11888

[lmiller1990]

Okay, I kicked this off with the Nx team: nrwl/nx#13148

It should be possible to configure without Nx official support, though. Let's see if the Nx team has a recommendation.

[lmiller1990]

Ok, I actually got it to work, I had to add my own angular.json. I guess this is buried somewhere in node_modules for the Nx preset... let's see what Nx recommends.

I will upload my repo so you can take a look. I think the problem is that your angular.json is missing something, or pointing at the wrong place.

[lmiller1990]

Repo: https://github.com/lmiller1990/angular-nx-cypress

I ran a component test with npx cypress open --project apps/angular-nx-app-e2e --component --browser chrome. I am not sure if Nx will recommend a new project for component testing, embedding it in your main app, or in the e2e project. Let's see what they think.

The main thing I changed was adding a angular.json and configuring it. Maybe you can look at my angular.json and try to get it working with your repo? Here's my angular.json: https://github.com/lmiller1990/angular-nx-cypress/blob/main/apps/angular-nx-app-e2e/angular.json.

Let's work together with the Nx team to make this work. We could add a angularJson configuration to cypress.config if needed.

[lmiller1990]

I've logged an issue here, too, to track it: #24666

[alasdairrobinson]

@lmiller1990 Thanks very much for your detailed response/investigation! I'm going to try out your suggestions today/tomorrow. Do you know when Cypress 11 is due out?

[lmiller1990]

Cypress 11 is out already @alasdairrobinson 💯

Nx people also confirmed their next minor release will have updated support for Cypress 11 and Component Testing: nrwl/nx#13148 (comment)

Let's keep this discussion going until it's out and we confirmed everything works as expected.

[alasdairrobinson]

@lmiller1990 Thanks, will definitely keep an eye on that.
I've been trying to use your repo. I've run npm install and checked I've got the latest version of cypress but I get an error in apps/angular-nx-app-e2e/tsconfig.json 'Cannot find type definition file for 'cypress'.'
I tried pulling your angular.json file into my tutorial app and adjusting the relevant paths, but when I run cypress it finds the test file ok, but I get the following error at the console:
ERROR in src/e2e/app.cy.ts:3:1 - error TS2593: Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try npm i --save-dev @types/jest or npm i --save-dev @types/mocha and then add 'jest' or 'mocha' to the types field in your tsconfig.
Same for 'it' and 'cy' , it's like it can't find jest or cypress.
Although I suppose if the nx update is immenent it's probably not worth spending too much time on it?

[lmiller1990]

Re: typing errors - I've seen this before, you usually need to add a reference to cypress in your tsconfig.json or a /// <ref types="cypress">. I thought Nx would do this out of the box, perhaps not.

I'd say we should wait for the Nx update, if there's still issues, we can investagate. WDYT?

[alasdairrobinson]

Yeah I agree, no point in investing time in an update that might become redundant with the Nx update. Thanks for investigating though. Hopefully the Nx update is released soon!

[alasdairrobinson]

@lmiller1990 Was just looking and a new version of Nx has shipped : 15.2.3 I've created a new Nx angular project using latest and Cypress 11.2 is installed with it, but still get an error when I configure component testing.
Do you know if they meant new minor release xx.x.x or xx.x?

[lmiller1990]

Is it the same error?

Maybe better to log something in their repo - I think the problem is the Nx integration with Cypress, and we should work with them to fix it. Are you able to file an issue there with a minimal reproduction?

[alasdairrobinson]

@lmiller1990 I think it is, I just ran npx create-nx-workspace@latest specifying the Integrated option and specifying angular, then once it completed navigated to the e2e folder and ran npx cypress open, and tried to configure component test, and got the following

Your configFile threw an error from: cypress.config.js

We stopped running your tests because your config file crashed.

............\AppData\Local\Cypress\Cache\11.2.0\Cypress\resources\app\node_modules@packages\server\node_modules@cypress\webpack-dev-server\dist\helpers\angularHandler.js:101:15
99 | const angularJsonPath = await findUp('angular.json', { cwd: projectRoot });
100 | if (!angularJsonPath) {

101 | throw new Error(Could not find angular.json. Looked in ${projectRoot} and up.);
| ^
102 | }
103 | const angularJson = await fs.readFile(angularJsonPath, 'utf8');
104 | return JSON.parse(angularJson);
105 | }

[alasdairrobinson]

@lmiller1990 I wonder if it is because of this:
https://nx.dev/more-concepts/nx-and-angular
Nx doesn't setup 'angular.json' it looks like it creates 'project.json' for each app
Cypress is failing because it can't find 'angular.json'. I might be picking this up wrong though.

[lmiller1990]

I think angular.json is buried somewhere in Nx's config. You'll need to file an issue there, I don't think we can do much if there integration is looking at the wrong directory.

[alasdairrobinson]

@lmiller1990 I got it working. Thanks for your assistance.
If you don't mind, one more question. I've got simple angular components working but our components that use the bsdatepicker and bsdaterangepicker are failing to compile with an angular NG0301 error, they work fine on storybook but when I try and mount them on cypress I get that angular error. I've tried adding them as imports in the beforeEach section of the component test but I still get the same error. Do you know if there are problems with some imports?

[lmiller1990]

Looking at https://angular.io/errors/NG0301 but doesn't give me too many hints, can you provide a minimal reproduction?

If you can, that'd be great - I'd even recommend opening a new issue and tagging me, that way we can get more eyes on it. Everything should "just work", if it doesn't, it's either a config error (will help you debug) or an actual bug in Cypress (which we will fix).