Add support for CT using Vite as bundler

This currently relies on a small patch of @cypress/vite-dev-server [1]. Hopefully this patch can be submitted and accepted upstream. This fixes #698 [2]. [2] https://github.com/cypress-io/cypress/tree/develop/npm/vite-dev-server [1] #698
badeball · May 10, 2023 · 94a02c3 · 94a02c3
1 parent a25d389
commit 94a02c3
Show file tree

Hide file tree

Showing 16 changed files with 151 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ All notable changes to this project will be documented in this file.
 
 - Add support for (testing) type-specific configuration, fixes [#700](https://github.com/badeball/cypress-cucumber-preprocessor/issues/700).
 
+- Add support for component testing using Vite as bundler, fixes [#698](https://github.com/badeball/cypress-cucumber-preprocessor/issues/698).
+
 ## v17.0.0
 
 Breaking changes:

diff --git a/examples/ct-vite-react-ts/.npmrc b/examples/ct-vite-react-ts/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/examples/ct-vite-react-ts/cypress.config.ts b/examples/ct-vite-react-ts/cypress.config.ts
@@ -0,0 +1,32 @@
+import { defineConfig } from "cypress";
+import { devServer } from "@cypress/vite-dev-server";
+import react from "@vitejs/plugin-react";
+import { viteCommonjs } from "@originjs/vite-plugin-commonjs";
+import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";
+import { createRollupPlugin } from "@badeball/cypress-cucumber-preprocessor/rollup";
+
+export default defineConfig({
+  component: {
+    specPattern: "**/*.feature",
+    devServer(devServerConfig) {
+      return devServer({
+        ...devServerConfig,
+        framework: "react",
+        viteConfig: {
+          plugins: [
+            react(),
+            createRollupPlugin(devServerConfig.cypressConfig),
+            viteCommonjs(),
+          ],
+        },
+      });
+    },
+    async setupNodeEvents(on, config) {
+      // This is required for the preprocessor to be able to generate JSON reports after each run, and more.
+      await addCucumberPreprocessorPlugin(on, config);
+
+      // Make sure to return the config object as it might have been modified by the plugin.
+      return config;
+    },
+  },
+});
diff --git a/examples/ct-vite-react-ts/cypress/component/App.feature b/examples/ct-vite-react-ts/cypress/component/App.feature
@@ -0,0 +1,4 @@
+Feature: App
+  Scenario: render
+    Given I render the component
+    Then I should see the text "Hello world!"
diff --git a/examples/ct-vite-react-ts/cypress/component/App.tsx b/examples/ct-vite-react-ts/cypress/component/App.tsx
@@ -0,0 +1,15 @@
+import * as preprocessor from "@badeball/cypress-cucumber-preprocessor";
+
+import { mount } from "cypress/react18"
+
+import App from "../../src/App";
+
+const { Given, Then } = preprocessor
+
+Given("I render the component", () => {
+  mount(<App />);
+});
+
+Then("I should see the text {string}", (text: string) => {
+  cy.contains(text).should("exist");
+});
diff --git a/examples/ct-vite-react-ts/cypress/support/component-index.html b/examples/ct-vite-react-ts/cypress/support/component-index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+
+  </head>
+  <body>
+
+    <div data-cy-root></div>
+  </body>
+</html>
diff --git a/examples/ct-vite-react-ts/cypress/support/component.ts b/examples/ct-vite-react-ts/cypress/support/component.ts
diff --git a/examples/ct-vite-react-ts/package.json b/examples/ct-vite-react-ts/package.json
@@ -0,0 +1,16 @@
+{
+  "scripts": {
+    "postinstall": "patch-package"
+  },
+  "dependencies": {
+    "@badeball/cypress-cucumber-preprocessor": "latest",
+    "@cypress/vite-dev-server": "latest",
+    "@originjs/vite-plugin-commonjs": "latest",
+    "@vitejs/plugin-react": "latest",
+    "cypress": "latest",
+    "patch-package": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "typescript": "latest"
+  }
+}
diff --git a/examples/ct-vite-react-ts/patches/@cypress+vite-dev-server+5.0.5.patch b/examples/ct-vite-react-ts/patches/@cypress+vite-dev-server+5.0.5.patch
@@ -0,0 +1,13 @@
+diff --git a/node_modules/@cypress/vite-dev-server/client/initCypressTests.js b/node_modules/@cypress/vite-dev-server/client/initCypressTests.js
+index f0602c1..d7f05a0 100644
+--- a/node_modules/@cypress/vite-dev-server/client/initCypressTests.js
++++ b/node_modules/@cypress/vite-dev-server/client/initCypressTests.js
+@@ -36,7 +36,7 @@ if (supportFile) {
+ // So we use the "@fs" bit to load the test file using its absolute path
+ // Normalize path to not include a leading slash (different on Win32 vs Unix)
+ const normalizedAbsolutePath = CypressInstance.spec.absolute.replace(/^\//, '')
+-const testFileAbsolutePathRoute = `${devServerPublicPathRoute}/@fs/${normalizedAbsolutePath}`
++const testFileAbsolutePathRoute = `${devServerPublicPathRoute}/@fs/${normalizedAbsolutePath}?import`
+
+ /* Spec file import logic */
+ // We need a slash before /src/my-spec.js, this does not happen by default.
diff --git a/examples/ct-vite-react-ts/src/App.tsx b/examples/ct-vite-react-ts/src/App.tsx
@@ -0,0 +1,3 @@
+export default function App () {
+  return <p>Hello world!</p>
+}
diff --git a/examples/ct-vite-react-ts/tsconfig.json b/examples/ct-vite-react-ts/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "moduleResolution": "node16",
+    "jsx": "react-jsx"
+  }
+}
diff --git a/examples/readme.md b/examples/readme.md
@@ -14,8 +14,12 @@ The examples illustrates using each bundler in each language flavor.
 
 ## Component testing
 
-Only a single example illustrating component testing exist so far.
+Component testing works with both Webpack and Vite[^1] as a bundler.
 
 |                 | CJS                    | ESM                    | TS                          |
 |-----------------|------------------------|------------------------|-----------------------------|
 | React + Webpack |                        |                        | [Link](ct-webpack-react-ts) |
+| React + Vite    |                        |                        | [Link](ct-vite-react-ts)    |
+
+[patch-package]: https://github.com/ds300/patch-package
+[^1]: Using Vite requires patching `@cypress/vite-dev-server`, something which is easily achieved using [`patch-package`][patch-package] as the example illustrates.
diff --git a/lib/bundler-utils/rollup.ts b/lib/bundler-utils/rollup.ts
@@ -0,0 +1,21 @@
+import { Plugin } from "rollup";
+
+import { ICypressConfiguration } from "@badeball/cypress-configuration";
+
+import { compile } from "../template";
+
+export function createRollupPlugin(config: ICypressConfiguration): Plugin {
+  return {
+    name: "transform-feature",
+    async transform(src: string, id: string) {
+      if (/\.feature$/.test(id)) {
+        return {
+          code: await compile(config, src, id),
+          map: null,
+        };
+      }
+    },
+  };
+}
+
+export default createRollupPlugin;
diff --git a/lib/helpers/prepare-registry.ts b/lib/helpers/prepare-registry.ts
@@ -0,0 +1,10 @@
+import { Registry, assignRegistry, freeRegistry } from "../registry";
+
+const registry = new Registry(false);
+
+assignRegistry(registry);
+
+export function getAndFreeRegistry() {
+  freeRegistry();
+  return registry;
+}
diff --git a/lib/template.ts b/lib/template.ts
@@ -131,7 +131,7 @@ export async function compile(
 
   const createTestsPath = prepareLibPath("browser-runtime");
 
-  const registryPath = prepareLibPath("registry");
+  const prepareRegistryPath = prepareLibPath("helpers", "prepare-registry");
 
   const ensureRelativeToProjectRoot = (path: string) =>
     ensureIsRelative(configuration.projectRoot, path);
@@ -152,17 +152,13 @@ export async function compile(
   ];
 
   return `
+    const { getAndFreeRegistry } = require(${prepareRegistryPath});
     const { default: createTests } = require(${createTestsPath});
-    const { withRegistry } = require(${registryPath});
-
-    const registry = withRegistry(
-      false,
-      () => {
-        ${stepDefinitionPaths
-          .map((stepDefintion) => `require(${stringify(stepDefintion)});`)
-          .join("\n    ")}
-      }
-    );
+    ${stepDefinitionPaths
+      .map((stepDefintion) => `require(${stringify(stepDefintion)});`)
+      .join("\n    ")}
+
+    const registry = getAndFreeRegistry();
 
     registry.finalize();
 

diff --git a/package.json b/package.json
@@ -93,6 +93,7 @@
     "pngjs": "^7.0.0",
     "prettier": "^2.8.8",
     "recast": "^0.22.0",
+    "rollup": "^3.21.5",
     "stream-buffers": "^3.0.2",
     "strip-ansi": "^6.0.1",
     "strip-indent": "^3.0.0",