CT: vite v4 support

[ZachJW34]

What would you like?

Official support for Vite v4 (currently in beta): https://github.com/vitejs/vite/releases

Why is this needed?

We'll want to support Vite 4 even before it becomes stable, including scaffolding in the Launchpad as well. If there are bugs, we should make it easy for users to find them (which includes being able to scaffold a CT project using Vite v4.alpha/beta).

Other

I did some preliminary testing and everything seems to be working besides Launchpad setup. The major change is Rollup v3.

https://github.com/vitejs/vite/blob/v4.0.0-alpha.4/packages/vite/CHANGELOG.md

We should add some system-tests to verify v4 functionality.

[lmiller1990]

I kicked this off by updating the monorepo to use Vite 4... seems to work! #25101

[rockindahizzy]

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

[lmiller1990]

Migration guide: https://vitejs.dev/guide/migration.html

[mbp]

vite 4 is working for me, but Cypress still shows message:

We detected that you have versions of dependencies that are not officially supported:
vite. Expected ^=2.0.0 || ^=3.0.0, found 4.0.2.

[lmiller1990]

That's right - we just need to do a bit more testing before we bump the supported version, but it looks like we can do that in the next release.

This warning won't stop you, it's more just saying "the Cypress team hasn't fully verified Vite 4 doesn't introduce any breaking changes". We will do this soon.

[MikeMcC399]

The Component Testing Getting Started guide which instructs to use:

npm create vite@latest my-awesome-app -- --template react

no longer works, because vite@latest picks vite@4 since Dec 9, 2022 and Cypress doesn't yet accept vite@4 in the Component Testing setup wizard.

In the meantime use:

npm create vite@3 my-awesome-app -- --template react

How close to release is the support for vite@v4 in Cypress now?

[mike-plummer]

@MikeMcC399 Sorry for the delay on this, official support will likely land in Cypress 12.4.0 due to the holidays. However, there is a workaround to enable Vite v4 for those who want to use it - there weren't any major breaking changes in Vite v4 that really impact Cypress, so you just need to sidestep the wizard a little bit:

When scaffolding a new project, we "detect" Webpack since we don't see a supported version of Vite. Manually switch the menu to Vite:

We then wait for a supported version of Vite to be installed, but you can Skip this step and viola, you're up and running!

Hopefully that solves your problem until we get the supported version bumped

[MikeMcC399]

@mike-plummer
Many thanks for the information that vite@v4 will work.
I was scared off by the warning on the page shown after "Skip" when I had previously tried it.

I can confirm that the example Stepper.cy.jsx successfully tests Stepper.jsx with vite@4.0.4 installed.

[MikeMcC399]

@mike-plummer

To close the loop:

• Replace component test with React and Vite 4 github-action#748 has now updated the example in cypress-io/github-action to use vite 4 in Component testing
• Component Testing getting started screenshot missing vite 4 cypress-documentation#5055 now needs updating