Quasar 2.14.6 with app-vite fails cypress tests

[tofi86]

Quasar 2.14.6 with app-vite fails cypress tests

[IlCallo]

Nope, sorry, I won't be able to check it out this and next week unluckily
Try upgrading to the latest Cypress AE version and app-* version in the meantime
You don't need the @beta tag anymore for Cypress AE

AFAIK we're using the Cypress AE to test Quasar UI components in our own repo, it's pretty strange it won't work out in the wild

If anyone wants to dig deeper, I'll gladly review the PR

[IlCallo]

Thanks, I'll release the fix next week

[tofi86]

Follow up: I regenerated the basic test suite with quasar ext add @quasar/testing-e2e-cypress and had a look whether this works – and it does. Looked at the diff and found this change:

diff --git forkSrcPrefix/frontend/test/cypress/support/component.ts forkDstPrefix/frontend/test/cypress/support/component.ts
index 0016a80e8e9022c7504f3ae5e9e212ce7d74c002..065a589ba096d095f74b9ef1a1f486439cfcd3b0 100644
--- forkSrcPrefix/frontend/test/cypress/support/component.ts
+++ forkDstPrefix/frontend/test/cypress/support/component.ts
@@ -17,15 +17,14 @@ import './commands';
 
 
 // Quasar styles
-import 'quasar/src/css/index.sass';
+import 'quasar/src/css/index.sass'; // Or 'quasar/dist/quasar.prod.css' if no CSS preprocessor is installed
 // Change this if you have a different entrypoint for the main scss.
-import 'src/css/app.scss';
+import 'src/css/app.scss'; // Or 'src/css/app.css' if no CSS preprocessor is installed
 
 // ICON SETS
 // If you use multiple or different icon-sets then the default, be sure to import them here.
-import 'quasar/dist/icon-set/material-icons.umd.prod';
+import 'quasar/icon-set/material-icons';
 import '@quasar/extras/material-icons/material-icons.css';
-import '@quasar/extras/material-icons-outlined/material-icons-outlined.css';
 
 import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-e2e-cypress';
 import { Dialog, extend, Notify, Quasar } from 'quasar';

With this change to our test/cypress/support/component.ts file, it now works as expected! 🎉

Thanks for the fix!

[github-actions]

Hi @tofi86! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[rstoenescu]

@IlCallo

Somehow, the dist/icon-set/.umd.prod.js files are imported, instead of quasar/icon-set/ files. The structure of the dist/icon-set/ recently changed, but this is besides the point. Can you take a look, please?

[IlCallo]

I'll take a look next week, thanks for the heads up

[Jackson3195]

Any update on this?

[Jackson3195]

@IlCallo

Just to confirm Im running:

• @quasar/[email protected] (latest at time of this comment)
• @quasar/[email protected] (latest at time of this comment)

And still running into this.

Will see if I can figure out why as per your comment above (No promises!)

[Jackson3195]

@IlCallo

Based on what @rstoenescu mentioned, seems like the problem is with the test/cypress/support/component.ts file that gets injected when you add Cypress testing via Quasar cli.

Specifically:

Once you swap out the imports to use the ones found in @quasar/extras/*; which the subsequent line was importing from anyway, then Cypress starts working fine again.

Additionally, unsure which repo to raise the PR so pasting this here for visibility

[IlCallo]

You're mixing 2 features

quasar/icon-set/... define which icons should be used in Quasar components
@quasar/extras/... loads the selected icon set, thus making the first import working

The problem here seems like to be that the quasar/icon-set/... exported files for some reason are not found anymore

[IlCallo]

What changed is the content of the imported file, which now only checks window.Quasar, instead of multiple other places (e.g. globalThis, etc)

When we started supporting Cypress component testing, that was the only way to have a CJS version of those files from quasar package, and Cypress refused to compile ESM ones back then

Apparently we now have a CJS versions which seem to work fine
Please, try using import 'quasar/icon-set/material-icons'; instead and let me know if it fixes your issue

[Jackson3195]

@IlCallo

I can confirm replacing the line with import 'quasar/icon-set/material-icons'; also solves the problem!

[IlCallo]

Just released v6.1.0 which includes the fix

[tofi86]

@IlCallo thanks for your effort in trying to fix this issue.

Unfortunately, we still get the same error as initially reported when upgrading our dependencies:

Cypress:        13.7.3
Browser:        Electron 118 (headless) 
Node Version:   v18.16.1

upgraded dependencies:
"quasar": "^2.15.2",
"@quasar/extras": "^1.16.11",

upgraded dev dependencies:

"@pinia/testing": "^0.1.3",
"@quasar/app-vite": "^1.8.0",
"@quasar/cli": "^2.4.0",
"@quasar/quasar-app-extension-testing-e2e-cypress": "^6.1.0",

Quasar Info Output:

Operating System - Darwin(23.4.0) - darwin/arm64
NodeJs - 18.16.1

Global packages
  NPM - 9.5.1
  yarn - Not installed
  @quasar/cli - 2.4.0
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.15.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.8.0 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.11 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.23 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.3.2
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.16 -- Native-ESM powered web dev build tool
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-testing-e2e-cypress - 6.1.0 -- A Quasar App Extension for Cypress e2e

Networking
  Host - MacBook-Pro-von-Tobias.local
  en0 - 192.168.192.118
  utun4 - 10.8.15.7
  en7 - 192.168.192.166

and when running the Cypress component tests, we still get the "iconSet" error... :-(

Did I miss upgrading another dependency?