Working on enabling component tests with Vue 3 + Vite

[samuel-ziegler]

Hi @badeball ,

Thanks for the excellent plugin. Have e2e tests working fine with Vue 3 + Vite and have been taking a crack at getting component tests working. From digging into things so far, it seems that the issue is that Cypress asks VIte to load the component tests via the filesystem and Vite doesn't process those types of requests through it's plugin APIs.

Assuming I'm correct in my assessment, I see a few possible approaches to making this happen. Was wondering if you had any insight on which approach might be best:

1. Modify Vite to send those types of requests through its Plugin API.
2. Modify Cypress or the build chain to preprocess the feature files into JS before they reach Vite.
3. Modify Cypress to request the component tests files in a way that Vite will apply its plugins to them.

Any thoughts?

Thanks again!

[badeball]

Have you read my notes on this? #698

[samuel-ziegler]

Oh... btw... was confused by your last comment until I realized you were responding to me saying "You might..." I meant that in the generic "you" sense, not you specifically. Should have wrote something like "One might very well...". Sorry for the confusion.

[samuel-ziegler]

FYI, @badeball , made some progress. Can load, transform and successfully run a test feature file + step definition file. The bad news is that I haven't figured out how to get it to work without renaming the feature file to give it a ".tsx" extension. The other bad news is that I am unable to successfully load a Vue component into a step file.

The first issue feels like a bug in vite. Will need to follow up with them to understand better.

The second issue should be solvable, but needs more digging.

[samuel-ziegler]

FYI... got everything working with the exception of the '.feature' -> '.tsx' issue. My concern at this point is that the processing mechanisms needed to make this happen are so far away from how the processing would happen normally makes this of questionable use for testing. Given that, I'm going to explore some other solutions before commiting fully to this one.

Here is what I have so far. Let me know if there is a better way to do any of this.

cypress.config.mjs:

import { devServer } from '@cypress/vite-dev-server'
import { defineConfig } from "cypress";
import createBundler from "@bahmutov/cypress-esbuild-preprocessor";
import preprocessor from "@badeball/cypress-cucumber-preprocessor";
import createEsbuildPlugin from "@badeball/cypress-cucumber-preprocessor/esbuild.js";
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import { compile } from '@badeball/cypress-cucumber-preprocessor/lib/template.js';
import * as esbuild from 'esbuild';
import * as tmp from 'tmp';
import * as pluginVue from 'esbuild-plugin-vue-next';

import fs from 'fs';

const cucumberFileRegex = /component.*\.(tsx)$/;

export function cucumberPlugin(config) {
    return {
        name : 'cucumber-transformer',
        load : async (id, opt) => {
            if (cucumberFileRegex.test(id)) {
                const feature = await fs.promises.readFile(id,'utf8');
                const jsFeature = await compile(config.config,feature,id);
                const jsFeatureFilename = tmp.tmpNameSync();
                await fs.promises.writeFile(jsFeatureFilename,jsFeature);
                const tmpFilename = tmp.tmpNameSync();
                const built = await esbuild.build({
                    entryPoints : [jsFeatureFilename],
                    outfile : tmpFilename,
                    bundle : true,
                    format : 'esm',
                    plugins : [
                        NodeModulesPolyfillPlugin(),
                        pluginVue.default(),
                    ],
                });
                const code = await fs.promises.readFile(tmpFilename,'utf8');
                return {
                    code
                };
            } else {
                return null;
            }
        },
    }
}

export async function setupNodeEvents(on, config) {
    await preprocessor.addCucumberPreprocessorPlugin(on, config);

    on(
        "file:preprocessor",
        createBundler({
            plugins: [
                NodeModulesPolyfillPlugin(),
                NodeGlobalsPolyfillPlugin({
                    process: true,
                    buffer: true,
                }),
                createEsbuildPlugin.default(config),
            ],
        })
    );
    
    return config;
}

export default defineConfig({
    e2e: {
        specPattern: "cypress/e2e/**/*.feature",
        setupNodeEvents,
    },

    component: {
        specPattern: "cypress/component/**/*.tsx",
        setupNodeEvents,
        devServer : (devServerConfig) => {
            return devServer({
                ...devServerConfig,
                framework : 'vue',
                bundler : 'vite',
                viteConfig : {
                    plugins : [cucumberPlugin(devServerConfig)],
                    server : {
                        fs : {
                            strict : false
                        }
                    }
                },
            });
        }
    },
});

is-it-friday-yet.tsx

Feature: Is it Friday yet?
  Everybody wants to know when it's Friday

  Scenario Outline: Today is or is not Friday
    Given today is "<day>"
    When I ask whether it's Friday yet
    Then I should be told "<answer>"

  Examples:
    | day            | answer |
    | Friday         | TGIF   |
    | Sunday         | Nope   |
    | anything else! | Nope   |

is-it-friday-yet.tsx.js

import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
import { mount } from '@vue/test-utils';
import * as Test from '../../src/Test.vue';

const isItFriday = (today) => {
    return (today === 'Friday') ? 'TGIF' : 'Nope';
}

Given('today is {string}', function (givenDay) {
    this.today = givenDay;
});

When('I ask whether it\'s Friday yet', function () {
    this.actualAnswer = isItFriday(this.today);
});

Then('I should be told {string}', function (expectedAnswer) {
    assert.strictEqual(this.actualAnswer, expectedAnswer);
    const wrapper = mount(Test.default);
    console.log('wrapper',wrapper.html());
});

[badeball]

This makes me curious as to why you want to use the Vite mode of Cypress in the first place, given that you're just delegating it to esbuild. Why do you want to use Vite?

[samuel-ziegler]

As I mentioned, I'm new to all of these systems and was just trying to get something working. I forget all of the twists and turns it took me to get to this point. You might very well be able to do it utilizing more of Vite, but I wasn't able to figure it out. Glad to take suggestions on how to improve it.

[samuel-ziegler]

Ended up just writing a Cucumber plugin for Vitest:
https://github.com/SamZiegler/vitest-cucumber-plugin

Not yet feature complete, but it's getting there. Will probably end up using Vitest for my component tests with my plugin and Cypress with this plugin for the e2e tests.

[badeball]

FYI, Vite is now supported since v7.1.0.

[wlaka]

v7.1.0 version of what?

[badeball]

Ohoh, that was meant to say v17.1.0. And of this library.