quasar-testing

quasar-testing copied to clipboard

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