updated react example with plugin VitestCucumberPlugin specified in vitest.config.ts

[steoj]

Trying to make use of this plugin for a new project running vite, vitest, yarn modern on typescript.

Have spent too many hours trying to make this run, and currently getting the error message:

>>  yarn vitest
failed to load config from /Users/sten.johnsen/git/mmt-poc/vitest.config.ts

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Startup Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
/Users/sten.johnsen/git/mmt-poc/node_modules/@amiceli/vitest-cucumber/dist/src/module.js:1
export { setVitestCucumberConfiguration, } from './vitest/configuration';
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1197:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1287:10)
    at _require.extensions.<computed> [as .js] (file:///Users/sten.johnsen/git/mmt-poc/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66705:9)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:119:18)
    at Object.<anonymous> (/Users/sten.johnsen/git/mmt-poc/vitest.config.ts:25:30)

My vitest.config.ts looks like this:

import { VitestCucumberPlugin } from '@amiceli/vitest-cucumber';
import { defineConfig } from 'vitest/config';


export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'json-summary', 'html'],
      reportOnFailure: true,
    },
  },
  plugins: [
    VitestCucumberPlugin({
        specFilesDir: 'tests/steps/',
        featureFilesDir : 'tests/features/',
    })
],
});

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "strict": false,
    "sourceMap": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  }
}

As mentioned, we are running Yarn modern, but I do not think that affects this issue.

My question: Are you able to run vitest with cucumber plugin on a mono-repo react application from root with frontend and api (both typescript) in workspaces?

[Odonno]

It seems that Vitest requires packages to have type="module" in their package.json.

I think that the best option would be to create a monorepo that structures:

• the main package
• the plugin as a separate package with -plugin suffix

Best example I have is: https://github.com/TanStack/router/blob/main/packages/router-plugin/ It is using a Nx workspace but any kind of monorepo tool can do the trick.

[amiceli]

@steoj vitest-cucumber plugin is optional to run Gherkin, can you try without it ? Using just loadFeature and describeFeature. To check if error come from plugin or directly from vitest-cucumber package.

When I see error like Unexpected token 'export', I think I've to update building config to match commonjs for example.

[amiceli]

@steoj I make a test in project using CommonJS. I've same error, I'm working on it and I will publish a version usable with it.

[amiceli]

I'm still on it but I don't found fix currently. Even withtsup, it's a challenge ^^.

[amiceli]

I'm still locked on this bug, maybe somebody will fix this.