[Idea] component testing for Vite

[yann-combarnous]

According to https://www.npmjs.com/package/@cypress/vite-dev-server/v/2.2.1, the dev server:

• will load support files
• will load the current spec from the url
• will start the test when both files are done loading

The setup is the following for vite dev server in cypress/plugins/index.js

import { startDevServer } from '@cypress/vite-dev-server'

module.exports = (on, config) => {
...
  if (config.testingType === 'component') {
    on('dev-server:start', (options) => {
      return startDevServer({
        options,
        viteConfig: {
          configFile: path.resolve(__dirname, '..', '..', 'vite.config.ts'),
          clearScreen: false,
        },
      });
    });
  }
...
}

As Vite config can be overridden there is potential to add plugin for the cucumber transform, see https://vitejs.dev/guide/api-plugin.html#transforming-custom-file-types , similar to the compilation step in esbuild plugin: https://github.com/badeball/cypress-cucumber-preprocessor/blob/master/esbuild.ts .

Current behavior

Component testing does not work with this pre-processor, as Cypress uses dev servers to serve the tests, not pre-processors, in Component mode.

Desired behavior

A Vite plugin exist for this cypress cucumber project, to run in component testing.

Will give it a try in next few days, and see if I can validate the concept.

[badeball]

If you can provide a minimal example that contains Vite, a component, a feature file and step definition(s), then I might be able to show you how to integrate a loader.

[yann-combarnous]

If you can provide a minimal example that contains Vite, a component, a feature file and step definition(s), then I might be able to show you how to integrate a loader.

Sure, will do so tomorrow.

[yann-combarnous]

Here is an example repo, run yarn install then yarn cy:ct to launch Cypress component runner.

Test is added in cypress/integration. Have not tried yet to create the Vite plugin, so if you get a chance to give it a go, let me know.

cucumber.zip

[badeball]

Thanks for the example. I took a good look at it and was able to get it to compile correctly. However, the difference in how component tests are bundled compared to regular tests (or rather that they're not, but each module loaded separately by the browser), unfortunately makes the preprocessor currently incompatible with component testing.

For the curious: some design is required to support "Run all specs" while maintaining the isolation between tests and their step definitions, IE. despite "running all specs", specs still shouldn't share all step definitions. Supporting this test mode has been a major struggle and it continues to be so for plugin developers in general. See cypress-io/cypress#1586.

The design required entails calling require(..) for each file containing step definitions, in a particular context. However, vite-plugin-commonjs, necessary to make this compile, will lift all calls to require(..) to the top, thus breaking this context.

[badeball]

In order to support "Run all specs", component testing with Vite will remain unavailable, at least as long as the above-mentioned issue goes unsolved. This is true specifically for Vite, as Vite serves source code over native ESM (ref).

Component testing using a different bundler might still work, but I have not investigated it.

[badeball]

You know what, I’m not quite ready to abandon this. I need to sleep on it though.

[yann-combarnous]

Thx for looking into it, I also stumbled on the ESM stuff with require warning.

In addition, I am not sure about the upcoming changes in Cypress 10 where they merge component and standard runners.

[badeball]

Oh, where can I read about the changes you’re referring to?

[yann-combarnous]

Getting documentation on upcoming releases is a challenge with Cypress.

But looking at PRs from time to time, I see that they are preparing a unified runner, as a lot of code was duplicated when they created the component runner. This includes a lot of re-factoring on the backend side as well.

[espipj]

I'm facing similar problem did you manage to find a workaround?

[badeball]

What currently stands in the way of this, is that transform plugins aren't being invoked for non-js files with @cypress/vite-dev-server v3 / Cypress >= v10, as pointed out in this discussion. Readers should feel free to take a look into that.

[badeball]

This turns out to be why. It can be bypassed with a small change to Cypress though, we’ll see how that goes.

[espipj]

Thanks @badeball . Let's see if this can be fixed vite side :)

[badeball]

Support for component tests using Vite as bundler has been fixed and released as v7.1.0.

[espipj]

Hey @badeball with the configuration listed here: https://github.com/badeball/cypress-cucumber-preprocessor/blob/3fcba98d03a72cde3f6a682a7dfac0cddb22bfed/examples/ct-vite-ts/cypress.config.ts

I am unable to make it work... in fact, I think it cannot work as it is a problem on vite side not pre-processing non-JS files... See vitejs/vite#3828 (comment) and vitejs/vite#9981
Even if you create a "dumb" custom rollup plugin like this:

const customPlugin = () => {
  return {
    name: 'cucumber-to-cypress',
    transform(code, id) {
      console.log('##############');
      console.log(id);
      return null;
    },
  };
};

module.exports = defineConfig({
  component: {
    devServer(devServerConfig) {
      return devServer({
        ...devServerConfig,
        framework: 'react',
        bundler: 'vite',
        viteConfig: {
          plugins: [react(), createRollupPlugin(devServerConfig.cypressConfig), viteCommonjs(), customPlugin()],
        },
      });
    },

it will only console.log on requests to ts/js files (or similar)
See:

##############
/Users/PRIVATE_PATH/cypress/support/commands.ts
GET /__cypress/src/cypress/support/commands.ts 304 1.386 ms - -

and on the .feature files it's just printing:

GET /__cypress/src/@fs/Users/.../somename.feature 304 1.668 ms - -

PS: let me know if I'm missing something...

[badeball]

As explained here, this requires a patch to @cypress/vite-dev-server and the example illustrates how that can be achieved.

[espipj]

Thanks for the support on this @badeball !