Document changes needed to Cypress config when upgrading to @quasar/app-vite-2.0.0-beta

[FelixNumworks]

tl;dr: app-vite 2.0.0-beta.14 broke my Cypress Component tests but I found the fix

Hi,

I upgraded to the @quasar/app-vite 2.0.0-beta.14, but unfortunately, it broke my Cypress components tests. (i'm using @quasar/quasar-app-extension-testing-e2e-cypress)
My problem was that my public folder wasn't properly served to my tests through de devServer

I really struggled finding the solution but in the end I managed to fix it. This issue was caused by a discrepancy between Cypress 13 and Vite 5.

Solution

You need to add devServerPublicPathRoute: '' to the component section of the cypress.config.ts.

I found the solution in this Cypress README:
https://github.com/cypress-io/cypress/tree/develop/npm/vite-dev-server#devserverpublicpathroute-for-vite-v5

The documentation should probably mention this.

Here is my new cypress.config.ts

import { defineConfig } from 'cypress';
import { injectQuasarDevServerConfig } from '@quasar/quasar-app-extension-testing-e2e-cypress/cct-dev-server';
import registerCodeCoverageTasks from '@cypress/code-coverage/task';

export default defineConfig({
  fixturesFolder: 'test/cypress/fixtures',
  screenshotsFolder: 'test/cypress/screenshots',
  videosFolder: 'test/cypress/videos',
  video: true,
  e2e: {
    setupNodeEvents(on, config) {
      registerCodeCoverageTasks(on, config);
      return config;
    },
    baseUrl: 'http://localhost:8080/',
    supportFile: 'test/cypress/support/e2e.ts',
    specPattern: 'test/cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
  },
  component: {
    setupNodeEvents(on, config) {
      registerCodeCoverageTasks(on, config);
      return config;
    },
    supportFile: 'test/cypress/support/component.ts',
    specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
    indexHtmlFile: 'test/cypress/support/component-index.html',
    devServer: injectQuasarDevServerConfig(),
    // @ts-ignore
    devServerPublicPathRoute: '', // <------ THIS IS THE FIX
  },
});

I also mentionned this in the app-vite-beta discussion here

[IlCallo]

Thanks for reporting!
We should be able to add it conditionally upon AE scaffolding depending on the used package

[IlCallo]

Hey there, can you provide some more context on the problem and a way to reproduce it?

Cause I saw this kind of problems a couple times already, and every time we find a fix with Cypress team something breaks and we're forced to change our behavior
We need to discuss this with Cypress team again I guess

They also had some problems with Vite 5 support, see cypress-io/cypress#28347

Could you retest with latest version of @quasar/app-vite and Cypress?

[FelixNumworks]

I tested to remove the line with latest version of the packages but the bug is still there.

Context

Without devServerPublicPathRoute: '', the fetch command fails to resolve the path of my resources.

Packages versions

Here are the versions of all my packages that might matter for this:

├── @quasar/[email protected]
├── @quasar/[email protected]
├── @quasar/[email protected]
├── @vitejs/[email protected]
├── @vue/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]