Angular Component Testing Not Working "Cannot GET /__cypress/src/index.html"

[SharrocksDA]

Current behavior

When I try and run a component test with Angular I am getting this on the test runner "Cannot GET /__cypress/src/index.html":

Along with this in the console:

Desired behavior

It should just load the Dashboard Component and nothing else atm.

Test code to reproduce

This is the spec file contents:

import { DashboardComponent } from "src/app/home/components/dashboard.component"

describe('ComponentName.cy.ts', () => {
  it('Test', () => {
     cy.mount(DashboardComponent)
  })
})

Cypress Version

10.6.0

Node version

v16.14.0

Operating System

Win10

Debug Logs

No response

Other

Cypress is installed inside the ClientApp folder of our Angular application Angular versions:

[bahmutov]

Same when trying to write a component test in this repo https://gitlab.com/winni/angular-sudoku - throws types errors and 404

[vrknetha]

I do get the same issue when mounting a component.

import {SelectComponent} from './select.component';
import {SelectModule} from './select.module';

describe('Data plane setup component', () => {
  it('mount', () => {
    cy.mount(SelectComponent, {
      imports: [SelectModule]
    })
  })
})

Cypress Version: 10.6 Angular

"@angular/cli": "~13.2.5",
"@angular/compiler-cli": "13.3.2",

[mike-plummer]

Hello @SharrocksDA , thanks for opening the issue! Typically this indicates an issue in the webpack compilation while mounting your component due to missing compilation context (types, providers, imports, etc). Often this can be fixed by updating your tsconfig.json file or parsing any errors in the logs to find what providers/modules might be missing. To help diagnose the issue it's to have a minimal reproduction (I see bahmutov posted a project above but due to its size/complexity it is difficult to separate out potential configuration issues from any potential issue with Cypress itself). If you (or anyone else commenting on this issue) has a small, self-contained example that exhibits the problem it would help us out a ton. Here are some tips for providing a Short, Self Contained, Correct, Example.

[SharrocksDA]

Thank you @mike-plummer for your reply. I created a brand new Angular app with Cypress following the process here: https://docs.cypress.io/guides/component-testing/quickstart-angular

This is the repo I have created: https://github.com/SharrocksDA/AngularCyComponentIssue

It's doing the same thing for me again.

[mike-plummer]

Thanks for the reproduction case @SharrocksDA . In your example I see the logging output appended at the bottom of this message. This pointed me to your tsconfig.json file which appears to have a manually-added "types": ["cypress"], entry. Since Cypress bundles its own types (rather than using a @types/cypress dependency) this entry is unnecessary - if you comment it out your test works as expected for me. Can you confirm?

ERROR in error TS2688: Cannot find type definition file for 'cypress'.
  The file is in the program because:
    Entry point of type library 'cypress' specified in compilerOptions

[SharrocksDA]

Yep that makes it work in that smaller project, tried it in our main project and it still has the same issue.

[SharrocksDA]

I am getting these errors:

ERROR in ./node_modules/jwa/index.js 5:13-30
Module not found: Error: Can't resolve 'crypto' in 'C:\Development\RoadWeb\RoadWeb\ClientApp\node_modules\jwa'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

ERROR in ./node_modules/jwa/index.js 9:11-26
Module not found: Error: Can't resolve 'util' in 'C:\Development\RoadWeb\RoadWeb\ClientApp\node_modules\jwa'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

ERROR in ./node_modules/jws/lib/data-stream.js 4:13-30
Module not found: Error: Can't resolve 'stream' in 'C:\Development\RoadWeb\RoadWeb\ClientApp\node_modules\jws\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/jws/lib/data-stream.js 6:11-26
Module not found: Error: Can't resolve 'util' in 'C:\Development\RoadWeb\RoadWeb\ClientApp\node_modules\jws\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

ERROR in ./node_modules/jws/lib/sign-stream.js 8:13-30
Module not found: Error: Can't resolve 'stream' in 'C:\Development\RoadWeb\RoadWeb\ClientApp\node_modules\jws\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/jws/lib/sign-stream.js 12:11-26
Module not found: Error: Can't resolve 'util' in 'C:\Development\RoadWeb\RoadWeb\ClientApp\node_modules\jws\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

ERROR in ./node_modules/jws/lib/verify-stream.js 8:13-30
Module not found: Error: Can't resolve 'stream' in 'C:\Development\RoadWeb\RoadWeb\ClientApp\node_modules\jws\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/jws/lib/verify-stream.js 12:11-26
Module not found: Error: Can't resolve 'util' in 'C:\Development\RoadWeb\RoadWeb\ClientApp\node_modules\jws\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

[mike-plummer]

@SharrocksDA It looks like the Node jwa library is somehow being referenced in browser-side code that bootstraps in your component tests (either directly in code or via config). That library uses Node libs that aren't present in the browser - these used to be automatically polyfilled in Webpack 4 but are no longer handled automatically in Webpack 5. This tells me you're in one of the following situations:

1. Your project accidentally switched to Webpack5 from Webpack4 (which automatically polyfills for the logged issue): Double check your package.json dependencies
2. The reference is accidental: Track down how jwa is being referenced by your component tests and remove it
3. The reference is intentional: Follow the instructions in the logs to ensure the Node libraries are polyfilled for use in the browser

Without being able to see the code I'm not able to tell you exactly which situation you're in. Is this a public project I would be able to review?

[nagash77]

Unfortunately we have to close this issue due to inactivity. Please comment if there is new information to provide concerning the original issue and we can reopen.