Support vite v5 for component testing

[MikeMcC399]

What would you like?

Cypress component testing should support vite v5 (React, Vue and Svelte) - see announcement Vite 5.0 is out! Nov 16, 2023.

Why is this needed?

According to https://docs.cypress.io/guides/component-testing/overview "Vite 2+" is supported, however in practice only up to Vite v4 is supported by Cypress 13.x at this time.

cypress/packages/scaffold-config/src/dependencies.ts

Lines 73 to 80 in ab60af8

	export const WIZARD_DEPENDENCY_VITE = {
	type: 'vite',
	name: 'Vite',
	package: 'vite',
	installer: 'vite',
	description: 'Vite is dev server that serves your source files over native ES modules',
	minVersion: '^2.0.0 || ^3.0.0 || ^4.0.0',
	} as const

Other

See Migration from (vite) v4 and note that the CJS Node API has been deprecated.

[MikeMcC399]

• Following the steps to reproduce on vite.config missing after CT onboarding - unexpected error #26849, which installs the latest version of vite, results in the warning:

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

• This is also noted in the issue [CT] Fix Vite 5 CJS Deprecation Warning and Prepare for Vite 6 #28373

[MikeMcC399]

@jordanpowell88

The examples in cypress-io/component-testing-quickstart-apps are left using vite@4.5.1 until this enhancement request is addressed.

[rstoneIDBS]

I'm currently experiencing issues with component testing when trying Vite 5.0.7 with Cypress 13.6.1. It looks like 'public' folder mapping is broken which (for me anyway) breaks the use of mock service worker amongst other things. Is this likely to be fixed by the work mentioned in this ticket or would you like a new issue raised?

[juliandreas]

I'm currently experiencing issues with component testing when trying Vite 5.0.7 with Cypress 13.6.1. It looks like 'public' folder mapping is broken which (for me anyway) breaks the use of mock service worker amongst other things. Is this likely to be fixed by the work mentioned in this ticket or would you like a new issue raised?

Same.

[MikeMcC399]

@rstoneIDBS / @juliandreas

Did you try using the latest Vite version v5.0.10?

[juliandreas]

Did you try using the latest Vite version v5.0.10?

Yep.

[MikeMcC399]

• For comparison PR chore: support vite v4 for component testing #25365 from @marktnoonan which updated the support to Vite v4. Perhaps somebody has an idea what needs to be done to update to Vite v5 support?

[rstoneIDBS]

Just tried again with the latest versions of Cypress (13.6.2) and Vite (5.0.10) and I'm still seeing the same issue.

[steveworkman]

I'm currently experiencing issues with component testing when trying Vite 5.0.7 with Cypress 13.6.1. It looks like 'public' folder mapping is broken which (for me anyway) breaks the use of mock service worker amongst other things. Is this likely to be fixed by the work mentioned in this ticket or would you like a new issue raised?

Same.

public folder mapping has had a small change in vite 5. In aligning dev and preview behaviour vite 5 now returns the index.html file in more cases, so if you're trying to access /locales/en.json which is inside public then you need to get ./locales/en.json instead