feat: support vite v5

[AtofStryker]

• Closes Support vite v5 for component testing #28347

Additional details

Adds support for vite@5. To add support, the scaffolding config needs to support vite v4 as well as @cypress/vite-dev-server. The current architecture for @cypress/vite-dev-server is to roll forward and add support. Since significant changes aren't required and haven't been in the past, this works.

Note: if users are referencing the absolute public path in their config, they will likely need to set devServerPublicPathRoute to the expected destination of their public path. Since this default is shipped with Cypress, we cannot actively change it. Since we don't have a dedicated section to CT bundlers in our documentation, I have added it in the README of the package.

System tests are also added/updated. Unit/system tests are added for vite 5, and older system tests are updated to be on at least vite 4. This is NOT a breaking change, but gets us more in alignment with our unofficially supported last two versions.

Since I needed to change some of the path resolution behavior within the dev server, I added a new unit test, initCypressTests, since none existed and felt I needed to verify the new behavior. which additionally documents what is expected.

After this PR goes in I will work on getting the other packages updated to latest vite in the monorepo using vite@4 currently.

Steps to test

Run the added unit/system tests as well as test the build binary against a vite 5 project

How has the user experience changed?

PR Tasks

• Have tests been added/updated?
• Has a PR for user-facing changes been opened in cypress-documentation?
• Have API changes been updated in the type definitions?

[cypress]

6 flaky tests on run #55508 ↗︎

0

29254

1328

0

6

Details:

refactor resolveConfig test
Project: cypress	Commit: 029f5581a0
Status: Passed	Duration: 20:57 💡
Started: May 21, 2024 4:04 PM	Ended: May 21, 2024 4:25 PM

  scaffold-component-testing.cy.ts • 1 flaky test • launchpad-e2e

View Output

Test		Artifacts
scaffolding component testing > vuecli4vue3 > scaffolds component testing for Vue CLI 4 w/ Vue 3 project		Test Replay Screenshots

  commands/net_stubbing.cy.ts • 1 flaky test • 5x-driver-electron

View Output

Test		Artifacts
... > stops waiting when an fetch request is canceled		Test Replay

  commands/net_stubbing.cy.ts • 1 flaky test • 5x-driver-chrome:beta

View Output

Test		Artifacts
... > stops waiting when an fetch request is canceled		Test Replay

  commands/net_stubbing.cy.ts • 3 flaky tests • 5x-driver-webkit

View Output

Test		Artifacts
network stubbing > intercepting request > can delay and throttle a StaticResponse		</td> </tr> <tr> <td colspan="2"> <a href="https://cloud.cypress.io/projects/ypt4pf/runs/55508/overview/18f11e5e-b7af-49c0-910d-43bcd2722135?reviewViewBy=FLAKY&utm_source=github&utm_medium=flaky&utm_campaign=view%20test"> ... > with `resourceType` > can match a proxied image request by resourceType </a> </td> <td> </td> </tr> <tr> <td colspan="2"> <a href="https://cloud.cypress.io/projects/ypt4pf/runs/55508/overview/d1da490e-1459-45fb-99c6-59ddb8fad557?reviewViewBy=FLAKY&utm_source=github&utm_medium=flaky&utm_campaign=view%20test"> ... > stops waiting when an xhr request is canceled </a> </td> <td> </td> </tr></table> Review all test suite changes for PR #29518 ↗︎

[AtofStryker]

this is only added for debugging purposes, which becomes more important as we add versions

[jennifer-shehane]

Seems really weird to me that we don't have specific bundler docs for CT. Shouldn't this be documented as an option in the component config here? https://docs.cypress.io/guides/references/configuration#component

[AtofStryker]

I would think so, but I am not sure why it isn't documented. Was it something we wanted as an option but not to be widely surfaced or was the documentation just missed?

[jdenekat]

We've been trying to get a component test running after upgrading Vite to 5.0 (node 20.13). The only test failures we're having are from selectFile, like this:
cy.get('[data-cy="prime-drop-target"] > input[type=file]').selectFile('cypress/test-files/test.file', {
action: 'drag-drop',
force: true,
});
We get a system error, "FS" does not exist.

[ryanthemanuel]

Rather than flexing this everywhere. You could potentially make MAJOR_VERSIONS an array of objects like:

[
  {
    version: 4,
    vite: vite4
  },
  {
    version: 5,
    vite: vite5
  }
]

[AtofStryker]

The issue right now is we implicitly support versions below 4 as well, including 2 and 3 since we have not deprecated them. But for a unit test this probably isn't a big deal so I'll get it updated

[AtofStryker]

done in 029f558

[AtofStryker]

We've been trying to get a component test running after upgrading Vite to 5.0 (node 20.13). The only test failures we're having are from selectFile, like this: cy.get('[data-cy="prime-drop-target"] > input[type=file]').selectFile('cypress/test-files/test.file', { action: 'drag-drop', force: true, }); We get a system error, "FS" does not exist.

@jdenekat are you able to open an issue with a reproduction?

[cypress-bot]

Released in 13.10.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v13.10.0, please open a new issue.