Vite 3 not working with Cypress Component Testing

[lmiller1990]

Current behavior

Vite 3 does not work.

Desired behavior

It should work.

Test code to reproduce

I created a PR with a failing test: #22748

It has some info, but there's probably more to it than the one fix suggested by the Vite team: vitejs/vite#9059. Let's track progress here.

Cypress Version

10.3.0

Other

No response

[mHooshdar]

I tested it and the cypress was stuck on mounting in the component testing menu.

Do these changes fix the issue?

[wopian]

I tested it and the cypress was stuck on mounting in the component testing menu.

Do these changes fix the issue?

Adding the following to vite.config.* from the Vite 3 migration guide has made Cypress run without issues for me until Cypress can run with the new port/host architecture:

server: {
  port: 3000,
  host: '127.0.0.1'
}

[mHooshdar]

I tested it and the cypress was stuck on mounting in the component testing menu.
Do these changes fix the issue?

Adding the following to vite.config.* from the Vite 3 migration guide has made Cypress run without issues for me until Cypress can run with the new port/host architecture:

server: {
  port: 3000,
  host: '127.0.0.1'
}

Thanks wopian, I added these configs to my vite.config.* and cypress component testing works properly after that.

[lmiller1990]

Nice, we will make this change internally soon, so you don't need to 🎉

If someone wants to take a stab and get the glory, go for it - I can review your PR. You can look at the issue I linked in the OP telling what to do, and poke around npm/vite-dev-server. I've already added a failing test (see #22748).

Otherwise, I will make a PR tomorrow.

[reintroducing]

There is an additional issue I found after getting tests up and running with Vite 3. I am using msw to mock all endpoints (in development and during testing) and i'm achieving that by basically pre-loading all the mock files I have defined as such:

const req = import.meta.globEager('./**/index.js');
const modules = [];

Object.keys(req).forEach(key => {
    modules.push(...req[key].default);
});

export default modules;

As of Vite 3, globEager is deprecated. I upgraded my code to the following:

const req = import.meta.glob('./**/index.js', {eager: true});
const modules = [];

Object.keys(req).forEach(key => {
    modules.push(...req[key].default);
});

export default modules;

This works great in development mode, but it fails when the mocks get loaded in Cypress. I'm not sure where the issue is, but I suspect that, because it's still using Vite < 3 under the hood somewhere, its trying to load using import.meta.glob instead of reading the {eager: true} option and thus its not resolving the modules correctly.

Is this an issue with Cypress or perhaps @cypress/vite-dev-server (since I see that is still using v2.9.x of Vite)?

[lmiller1990]

I tried updating to Vite 3.0.2 in my project, worked fine, no need for any workaround.

I'm not sure why Cypress internal tests are failing, likely due to some additional layer of complexity. I'm sure it's around the localhost/port changes: https://vitejs.dev/guide/migration.html#architecture-changes-and-legacy-options

Anyone else try 3.0.2 and find it works just fine?

[wopian]

Yes, can confirm Vite 3.0.2 runs with the host (and port but I need that 😅) workaround removed. I'm not sure what change would have fixed this from the changes listed in 3.0.1 or 3.0.2 though 🤔

[wopian]

cypress run --component works as expected, but I did discover an issue when I went to interactively run a component test today.

Cypress fails to load and run the individual specs with cypress open --component, it endlessly hung on loading the selected spec. Re-add the host: '127.0.0.1' option back to the Vite config allowed cypress open to run correctly again - so the changes in 3.0.2 only seems to have fixed the issues in headless mode 🤔

Unfortunately there's no warning/error messages in the browser console or terminal as it is just a request that is never fulfilled:

[lmiller1990]

@wopian are you using React and the @vitejs/plugin-react? There's a bug with how we integrate plugins, I will post a patch PR today.

I'm able to do open mode with my Vue 3 + Vite 3 + Cypress 10 project, but I don't doubt there's some things we need to fix. A minimal reproduction would help.

[wopian]

Vue 3. I'm travelling until Monday, but I'll see if I can put together a reproduction then 👍

[lmiller1990]

Should be solved by this PR: #22915
Seems to work for our internal tests (couple hundred specs using Vue 3, Vite 3, and a bunch of Vite plugins).

[adamdehaven]

@lmiller1990 any news on when #22915 will be merged? It's a blocker for our CI since we don't want to change all of our default server.host settings.

I reviewed your PR and I don't see anything that looks troublesome.

[lmiller1990]

@adamdehaven I have two debug two failing tests (pipeline: https://app.circleci.com/pipelines/github/cypress-io/cypress?branch=lmiller%2Fvite-bump-v2).

Once those are passing, I'll just need a few reviews. The goal is to merge this by the end of this week, so it will be released in the next Cypress version. Those are usually bi-weekly releases, so it would be within two weeks.

I'm excited to have Cypress running on Vite 3 💯

[lmiller1990]

Ok it's green!

[adamdehaven]

FWIW I solved temporarily for us by updating the config in cypress.config.ts

export default defineConfig({
  component: {
    devServer: {
      framework: 'vue',
      bundler: 'vite',
      viteConfig: {
        server: {
          host: '127.0.0.1'
        }
      }
    },
  }
})

[lmiller1990]

I wonder if we can do something so users don't need too add server.host. I didn't need it for my projects, I'm not entirely clear on why you do, but glad it's working for you.

React users (and others, using plugins that inject things into <head> in a <script> tag won't be able to use that work around, though - they'll need to wait for the PR to merge, since Vite had some breaking changes around transformIndexHtml we needed to respond to in our code base.

[wopian]

@lmiller1990 I'm not able to reproduce cypress run working while cypress open fails to load component tests on Vite 3.0.2 - they both endlessly hang (now?). So no idea what was happening last week when it was working for a few days 🤔

Here is a minimal setup where tests can only be run when you add host: '127.0.0.1' in vite.config.ts or cypress.config.ts:

• https://github.com/wopian/vite-vue-cypress

It is the generic Vue Typescript template created by yarn create vite with Cypress installed using the cypress/support/* files of our web apps (just some Vue shims for fewer imports in component tests)

Ran with:

• Vite 3.0.2
• Cypress 10.3.1
• Node 18.6.0
• macOS 12.4

[lmiller1990]

None of my projects need to set host explicitly, weird. I'll need to look into this more. Thanks for the reproduction!

The PR I made does not address the host issue specifically, but just upgrades our repo to Vite 3, and fixes the issue with plugins like @vitejs/plugin-react to work correctly. That said, since there's a known work around (adding host) I'm still happy to merge the Vite PR as is, and revisit/debug the host specific issue separately.

[lmiller1990]

It's merged and will be in the next Cypress release.

[ZachJW34]

Looks like the host: '127.0.0.1' is needed for projects using a Node version >= 17. I have a PR that defaults host to 127.0.0.1 which should allow all vite projects regardless of node version to work. #23048