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.

https://github.com/cypress-io/cypress/blob/ab60af86332a2a1c3c65e965dd539f081a28807a/packages/scaffold-config/src/dependencies.ts#L73-L80

Other

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

[MikeMcC399]

• Following the steps to reproduce on https://github.com/cypress-io/cypress/issues/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 https://github.com/cypress-io/cypress/issues/28373

[MikeMcC399]

@jordanpowell88

The examples in cypress-io/component-testing-quickstart-apps are left using [email protected] 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 https://github.com/cypress-io/cypress/pull/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

[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?

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

Yes, I noticed that in the release notes. I think the code that needs to change is part of the Cypress Vite dev server integration - I couldn't see any way of doing this from the consumer side. My app works fine in Vite dev mode (with Vite 5), it only fails when running Cypress component tests.

[SamGeodynamics]

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.

as said; it's not working. (cypress v13.6.2 & vite 5.0.10), you can press skip, then you are greeted with a huge version mismatch notification.

[juliandreas]

I think the code that needs to change is part of the Cypress Vite dev server integration - I couldn't see any way of doing this from the consumer side. My app works fine in Vite dev mode (with Vite 5), it only fails when running Cypress component tests.

Same. Imports works fine in the app with Vite 5, but it fails when running Cypress. Changing a path from /locales/en.json to ./locales/en.json, for example, is not helping in that scenario. The Cypress team needs to update their package to support Vite 5.

[jennifer-shehane]

We'd be open to a PR to help support Vite 5.

[MikeMcC399]

@jennifer-shehane

We'd be open to a PR to help support Vite 5.

Just for the sake of clarity, since I'm the author of this issue, I'm not able to provide a PR to update Cypress for Vite 5 compatibility. I don't have the skills to do this.

[essenmitsosse]

Giving the hefty sums Cypress charges for their service, asking the community to implement support for the latest version of industry-standard tooling, while ignoring the issue for over four month, seems like pretty bad optics. I understand Cypress itself is free and open source, but the lack of Vite 5 support is a road block for Cypress-only users as well as Cypress cloud customers.

[waldemarennsaed]

Giving the hefty sums Cypress charges for their service, asking the community to implement support for the latest version of industry-standard tooling, while ignoring the issue for over four month, seems like pretty bad optics. I understand Cypress itself is free and open source, but the lack of Vite 5 support is a road block for Cypress-only users as well as Cypress cloud customers.

I agree on what @essenmitsosse says. Vite 5 is released for a while now. We are currently migrating our whole stack to Vue 3, including Vuetify 3 and the latest Vite version. I do not understand why the Cypress org does not see their responsibility in keeping their tooling up-to-date.

[MikeMcC399]

Vite's blog announced release of 5.1 in February 2024.

Vite's GitHub releases currently show 5.2.8 as latest and there is a first appearance of a 6.0.0 alpha version.

[waldemarennsaed]

Vite's blog announced release of 5.1 in February 2024.

Vite's GitHub releases currently show 5.2.8 as latest and there is a first appearance of a 6.0.0 alpha version.

Well, a new major release within two months is really quick. However, Vite 5 is out a while now. IMHO cypress should have supported it already.

[jennifer-shehane]

We do plan to evaluate the effort to support Vite 5.

[AtofStryker]

I had some time to build binaries for vite@5 support if anyone wants to give it a try https://github.com/cypress-io/cypress/commit/d129a641afd33b187ed720d561a573d37b24694d. This is still a work in progress so hoping for feedback to see if there is anything we missed here!

[rstoneIDBS]

I've just tried this and I still see exactly the same problem. Looking at the code in this fix I can't see anything that addresses how Vite 5 changed how 'public' folders are handled - see comment here https://github.com/cypress-io/cypress/issues/28347#issuecomment-1875223144. This appears to be what is causing the issue for me as Cypress no longer loads Mock Service Worker correctly which causes my tests to fail.

[rstoneIDBS]

I've found a fix for the MSW issue :)

I already had a section in my component.js that was configuring the MSW service worker, this also allows you to specify the URL of the worker so I changed it to this:

const { worker, graphql } = await import('../../src/mocks/browser');

Cypress.on('test:before:run:async', () => {
  if (worker.context.isMockingEnabled) {
    return;
  }
  return worker.start({
    serviceWorker: {
      url: '../src/public/mockServiceWorker.js',
    },
    // Disable logging of matched requests as this can occasionally result in test failures
    quiet: true,
  });
});

window.msw = {
  worker,
  graphql,
};

The key bit is the url setting as this ensures that MSW loads its code from the correct location.

This fixes MSW, but it won't fix anything else being served from the 'public' directory so it would be good if Cypress could figure out how to handle this in a more generic fashion.

[whitespacecode]

The issue is still present inCypress V13.8.1

[rstoneIDBS]

The issue is still present inCypress V13.8.1

See https://github.com/cypress-io/cypress/issues/28347#issuecomment-2077703297 - it looks like 13.9.0 might fix this