jQuery and custom JS files not loading in Cypress test environment (Angular app)

I'm working on an Angular project, and I’ve added the following external scripts in my angular.json file under the scripts section:

"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"src/assets/jquery.panzoom.min.js",
"node_modules/ios-inner-height/dist/ios-inner-height.js"
]


When I run the application normally using ng serve, everything works as expected — jQuery and panzoom function correctly in the browser.

However, when I run my end-to-end (E2E) tests using Cypress (cypress open or cypress run), the scripts don’t seem to load properly. In the browser console (when Cypress is running), I get errors like:

Uncaught ReferenceError: panzoom is not defined

I have added wait and all on cy.visit(URL) but still it's not loading the files, and when in cypress browser console, I am trying to find typeof JQuery it's giving undefined.

Continue reading...