Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cypress component tests not loading assets with Angular #23797

Closed
lydemann opened this issue Sep 13, 2022 · 6 comments · Fixed by #24106
Closed

Cypress component tests not loading assets with Angular #23797

lydemann opened this issue Sep 13, 2022 · 6 comments · Fixed by #24106
Assignees
@ZachJW34
Labels
CT Issue related to component testing

Comments

@lydemann
Copy link

Current behavior

It will not load assets:

image

Even though the dev server is copying the assets:
Screenshot 2022-09-13 at 13 40 07

Desired behavior

It should load assets from eg.:

http://localhost:8080/assets

Test code to reproduce

image

https://github.com/lydemann/cypress-assets-bug

Cypress Version

10.7.0

Node version

16.14.2

Operating System

12.3.1

Debug Logs

No response

Other

Assets are not loaded, eg. the image in the repo
@ZachJW34
Copy link
Contributor

@lydemann thanks for posting, I can verify that the assets aren't loading properly. I was able to implement a quick hack and get assets to load by editing the cypress/support/component-index.html with the following:

<head>
	...
	<base href="/__cypress/src/" />
</head>

Could you give this a try and see if it works? Your image shows that it's failing to load assets/env.js rather than a traditional asset (like a .png) so might be more to explore unless I'm misunderstanding.

This is definitely something we should be handling on our side but I'm curious if the hack works for you.

@lydemann
Copy link
Author

@lydemann thanks for posting, I can verify that the assets aren't loading properly. I was able to implement a quick hack and get assets to load by editing the cypress/support/component-index.html with the following:

<head>
	...
	<base href="/__cypress/src/" />
</head>

Could you give this a try and see if it works? Your image shows that it's failing to load assets/env.js rather than a traditional asset (like a .png) so might be more to explore unless I'm misunderstanding.

This is definitely something we should be handling on our side but I'm curious if the hack works for you.

Yes, that does work like that, but should probably also work as domain:port/assets/*

Thanks for looking into it.

@ZachJW34 ZachJW34 added CT Issue related to component testing routed-to-ct labels Sep 15, 2022
@ZachJW34 ZachJW34 assigned ZachJW34 and unassigned ZachJW34 Sep 15, 2022
@lydemann
Copy link
Author

Any updates?

@inigoiparragirre
Copy link

Same problem here. I wanted to add MSW using mockServiceWorker.js in assets, and it doesn't load it.

@jordanpowell88 jordanpowell88 mentioned this issue Oct 4, 2022
Merged
4 tasks
@cypress-bot cypress-bot bot added the stage: needs review The PR code is done & tested, needs review label Oct 4, 2022
@cypress-bot
Copy link
Contributor

cypress-bot bot commented Oct 4, 2022

The code for this is done in cypress-io/cypress#24106, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

@cypress-bot cypress-bot bot removed the stage: needs review The PR code is done & tested, needs review label Oct 4, 2022
@cypress-bot
Copy link
Contributor

cypress-bot bot commented Oct 11, 2022

Released in 10.10.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v10.10.0, please open a new issue.

@cypress-bot cypress-bot bot locked as resolved and limited conversation to collaborators Oct 11, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@ZachJW34 ZachJW34

Labels
CT Issue related to component testing
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(angular): set webpack base so angular assets load cypress-io/cypress
3 participants
@inigoiparragirre @lydemann @ZachJW34