Component tests do not load with Vite 3 + HTTPs

[jnarowski]

Current behavior

When vite.config server.https is set to true. Cypress component tests do not load. It's stuck on "Your tests are loading" but without any error messages in console or in browser.

See https://jmp.sh/A9CSdBtl

Desired behavior

Component tests should run successfully. Commenting out HTTPS in server.https and restarting Cypress allows the tests to pass.

Test code to reproduce

https://github.com/jnarowski/vite-3-vue-3-cypress

yarn install yarn cypress open

Click HelloWorld test and it will not run

Cypress Version

10.11.0

Node version

16.17.1

Operating System

Mac M1 Ventura

Debug Logs

https://gist.github.com/jnarowski/950ae8d3d4586472255a2a2052ee3ec0

Other

No response

[marktnoonan]

Thanks for this report @jnarowski - I had trouble reproducing the before/after, turned out I needed to also remove the basicSsl() plugin for the tests to begin to work (at least, locally for me). Routing to the CT team to take a closer look.

[jnarowski]

Thanks! Yeah, we need the basicSsl plugin to serve vite locally via https, but adding it breaks the cypress tests as it looks like component tests start on HTTP, and there is no way to configure them to start on https like vite.

[jnarowski]

I was able to get it to work by disabling the basicSsl plugin and setting vite config (server.https) to false. A temporary workaround at least.

On a separate note - does this start a separate vite server (from the one running from yarn dev) to power the component tests? Should it use the same vite server that is already running? Just trying to understand the workflow so I can verify that it's working properly.

[marktnoonan]

Got it 👍

Cypress is running its own development server for component testing - you can actually give it a completely different vite config, so you should be able to keep your app's config the same, and not use HTTPS/basicSsl for Cypress (which seems fine in a component test situation?). You don't need to have yarn dev for your vite app running to test it with Cypress CT.

Something you can consider - In cypress.config.js you can set component.devServer.viteConfig. If it's not set we find the one you have for your main app. viteConifg can be a function, so a useful pattern is to import your main config, and make any modifications you need, then return the modified config that Cypress will use. This is useful if your main vite config file has a lot going on that do you want to keep for component testing.

I'm not sure what our way forward will be regarding an SSL plugin until I talk with more of the team, I think if something like that is not a dependency of your components in terms of functionality, it's not critical that Cypress supports it, as long as there's an escape hatch. But I'll get some more input on that.

[jnarowski]

Appreciate the explanation. Now that I understand the internals a bit more it does seem like one of those options will suffice. I don't need SSL to run the components unless I need to do an ajax request (which I think I will stub).

Any chance you'd have an example of the vite config override? I am using vite config as a function currently.

I just need to set https to false and remove the SSL plugin on the cypress side. I didn't find this in the docs - would be helpful to probably add!

I tried this:

  component: {
    devServer: {
      framework: 'vue',
      bundler: 'vite',
      viteConfig: async () => {
        const config = await viteConfig({ mode: 'development', command: 'build'})
        config.server.https = false
        return config
      }
    },
  },

But then the component stopped mounting so guessing it wasn't the right way to return the vite config? I did verify that config contained a proper object of the entire config.

[KhodeN]

My "solution":

import { defineConfig } from 'cypress';
import { UserConfig } from 'vite';

import rawViteConfig from './vite.config';

const viteConfig = rawViteConfig as UserConfig;

if (viteConfig.server) {
    // @see https://github.com/cypress-io/cypress/issues/24564
    delete viteConfig.server.https;
    viteConfig.server.port = 3002;
}

export default defineConfig({
    component: {
        devServer: {
            framework: 'react',
            bundler: 'vite',
            viteConfig,
        },
    },
});

But what I can do to start over https for components, which doing real XHR requests over HTTPS?

[baus]

Hey team! Please add your planning poker estimate with Zenhub @amehta265 @astone123 @lmiller1990 @marktnoonan @mike-plummer @rockindahizzy @warrensplayer @ZachJW34

[ZachJW34]

Would the outcome of this ticket be documentation? I don't think https support will land anytime soon: https://github.com/cypress-io/cypress/issues/3708

[jnarowski]

On my side updating the documentation should be enough for now.

[randikasennen]

What about the progress of the fix here? I'm also experiencing the same issue with React + Vite + Cypress. It's great to have a solution soon.

[mschaefer-gresham]

This still appears to be an issue with vite 5. The only way my tests run is if I set server.https to false, even though this doesn't appear to be a valid value for this setting.