Webpack error overlay covering cypress components and can't disable it

[frisch-raphael]

What did you get as the error?

I've been trying to test a quasar app through cypress component tests. However, the webpack error overlay is covering my components and cypress can't click them

I tried to disable it from quasar.conf.js, and while it worked for the e2e tests, it did not for the components test.

Configuration used to disable the overlay:

    devServer: {
      client: {
        overlay: false,
      },
      server: {
        type: 'http',
      },
      port: 8080,
      open: true, // opens browser window automatically
    },

What were you expecting?

I expected the quasar.conf.js configuration to also work for the component test.

What steps did you take, to get the error?

Create a project that produces a TS compile error Create and launch a cypress component test that needs to click one of its component

[IlCallo]

Which version of the AE are you using? Also, that's pretty much expected behaviour, you should fix the TS error or at very least disable it with // @ts-expect-error if it exists on purpose

[frisch-raphael]

Hi @IlCallo, thanks for your answer. Here's the revelent part of my package.json

    "@quasar/quasar-app-extension-testing": "^2.0.0-beta.3",
    "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.0.0-beta.9",

I'll use // @ts-expect-error then. Am I wrong in thinking that setting

      client: {
        overlay: false,
      },

in quasar.conf.json should also affect component testing ?

[IlCallo]

AFAIK component testing doesn't use devServer options as the dev server is managed by Cypress directly, while in e2e tests we launch a fully fledged Quasar app, so we have control over that. You can probably find a way to tweak the underlying configuration by updating the config object after you called injectDevServer into the component testing branch in test/cypress/plugins/index

const pluginConfig: Cypress.PluginConfig = async (on, config) => {
  // Enable component testing, you can safely remove this
  // if you don't plan to use Cypress for unit tests
  if (config.testingType === 'component') {
    await injectDevServer(on, config);
    // ----------> try updating config here <----------
  }

  return config;
};

[frisch-raphael]

@IlCallo Perfect. I'll try to feedle with the config object.

[squareloop1]

@IlCallo Perfect. I'll try to feedle with the config object.

Did you manage to change the config? How did you disable the overlay for component tests?