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

React Static Asset Serving #29381

Open
McKayMower opened this issue Apr 22, 2024 · 0 comments
Open

React Static Asset Serving #29381

McKayMower opened this issue Apr 22, 2024 · 0 comments
Labels
stage: needs investigating Someone from Cypress needs to look at this

Comments

@McKayMower
Copy link

McKayMower commented Apr 22, 2024 •
edited by jennifer-shehane

Current behavior

Hello,

I am trying to have a folder serve static assets in cypress. I am using Cesium which is a 3D earth map sandbox. I believe Cesium makes requests for static assets like logos and such.

I followed the install for Resium, which is a React library for Cesium. It has me create a symbolic link (seen in package.json postinstall script). This puts a link to the build of Cesium assets (found inside node_modules) inside of the public directory. This is where Cesium will fetch the aforementioned static assets.

My question is, how can I use a mix of webpack and cypress to statically serve these assets? Right now, the error is as follows:

"ERROR:  {
  "statusCode": 404,
  "response": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Cannot GET /__cypress/src/cesium/Assets/IAU2006_XYS/IAU2006_XYS_18.json</pre>\n</body>\n</html>\n",
  "responseHeaders": {
    "connection": "close",
    "content-length": "198",
    "content-security-policy": "default-src 'none'",
    "content-type": "text/html; charset=utf-8",
    "date": "Mon, 22 Apr 2024 22:37:06 GMT",
    "vary": "Accept-Encoding",
    "x-content-type-options": "nosniff",
    "x-powered-by": "Express"
  },
  "message": "The following error originated from your application code, not from Cypress. It was caused by an unhandled promise rejection.\n\n  > \n\nWhen Cypress detects uncaught errors originating from your application it will automatically fail the current test.\n\nThis behavior is configurable, and you can choose to turn this off by listening to the `uncaught:exception` event.",
  "docsUrl": [
    "https://on.cypress.io/uncaught-exception-from-application"
  ]
}"

This error is generated from catching the uncaught exception inside of cypress/support/component.ts. I return false so the test passes, without this it will fail the test.

It appears the request is made to __cypress/src/cesium/Assets/... which, if you check inside of public/cesium, we have an Assets directory that actually has these things.

I can go to http://localhost:9989 if I add an artificial delay to the test, and see that there is a cesium directory (this is the one served from the public directory). However, going to http://localhost:9989/__cypress/src/cesium/Assets/... results in a 404, almost as if the public directory is copied incorrectly, or not copied at all.

My guess is I have missed something in the webpack configuration inside the cypress.config.ts file.

Desired behavior

In this situation, Cypress should serve assets inside of the __cypress/src/cesium directory so Cesium's requests do not result in a 404 response

Test code to reproduce

https://github.com/McKayMower/cypress-static-asset-serving

Notes:

  • REQUIRED: run npm i the root directory of the project before running anything else
  • to run the tests, run npm run cypress-component in the root directory of the project. From here you can check the recordings directory from cypress to verify the error happens, and you can also see the error print out in the terminal.

Cypress Version

13.8.0

Node version

21.7.3

Operating System

Ubuntu 22.04.3 LTS

Debug Logs

No response

Other

No response
@jennifer-shehane jennifer-shehane added the stage: needs investigating Someone from Cypress needs to look at this label Apr 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
stage: needs investigating Someone from Cypress needs to look at this
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jennifer-shehane @McKayMower