Merge pull request #20 from th3fallen/cypress-test

Cypress test
th3fallen · Dec 26, 2023 · bec4567 · bec4567
2 parents 7503410 + d96ce5f
commit bec4567
Show file tree

Hide file tree

Showing 17 changed files with 149 additions and 39 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -32,3 +32,6 @@ jobs:
 
       - name: Test
         run: pnpm run test
+
+      - name: Cypress Test
+        run: pnpm run cypress:run
diff --git a/cypress/component/Test.cy.tsx b/cypress/component/Test.cy.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { TestComponent } from './TestComponent'
+
+describe('Test.cy.tsx', () => {
+  it('playground', () => {
+    cy.mount(<TestComponent title="TitleText" text="BodyText" />)
+    cy.contains('h1', 'TitleText').should('be.visible')
+    cy.contains('p', 'BodyText').should('be.visible')
+  })
+})
diff --git a/cypress/component/TestComponent.tsx b/cypress/component/TestComponent.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+export const TestComponent = ({ title, text }) => {
+  return (
+    <div>
+      <h1>{title}</h1>
+
+      <p>{text}</p>
+    </div>
+  )
+}
diff --git a/cypress/config/cypress.config.ts b/cypress/config/cypress.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from 'cypress'
+import { devServer } from '../../dist/devServer'
+
+export default defineConfig({
+  component: {
+    video: false,
+    supportFile: './support/component.ts',
+    specPattern: './component/*.cy.{tsx,jsx,js,ts}',
+    indexHtmlFile: '../support/component-index.html',
+    devServer(devServerConfig) {
+      return devServer({
+        ...devServerConfig,
+        framework: 'react',
+        rspackConfig: require('./rspack.config.js'),
+      })
+    },
+  },
+})
diff --git a/cypress/config/rspack.config.js b/cypress/config/rspack.config.js
@@ -0,0 +1,5 @@
+const rspack = require('@rspack/core')
+
+module.exports = {
+  plugins: [new rspack.ProvidePlugin({ process: 'process' })],
+}
diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
@@ -0,0 +1,15 @@
+<!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/cypress/support/component.ts b/cypress/support/component.ts
@@ -0,0 +1,36 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+// import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/react18'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
diff --git a/dist/helpers/sourceRelativeRspackModules.js b/dist/helpers/sourceRelativeRspackModules.js
@@ -145,18 +145,6 @@ function sourceDefaultRspackDependencies(config) {
     return { framework, rspack, rspackDevServer };
 }
 exports.sourceDefaultRspackDependencies = sourceDefaultRspackDependencies;
-// export function getMajorVersion<T extends number>(json: PackageJson, acceptedVersions: T[]): T {
-//   const major = Number(json.version.split('.')[0])
-//   if (!acceptedVersions.includes(major as T)) {
-//     throw new Error(
-//       `Unexpected major version of ${json.name}. ` +
-//         `Cypress-rspack-dev-server works with ${json.name} versions ${acceptedVersions.join(
-//           ', ',
-//         )} - saw ${json.version}`,
-//     )
-//   }
-//   return Number(major) as T
-// }
 function restoreLoadHook() {
     ;
     module_1.default._load = originalModuleLoad;

diff --git a/dist/loader.js b/dist/loader.js
@@ -61,7 +61,7 @@ function buildSpecs(projectRoot, files = []) {
 // Runs the tests inside the iframe
 function loader() {
     const ctx = this;
-    // In Webpack 5, a spec added after the dev-server is created won't
+    // A spec added after the dev-server is created won't
     // be included in the compilation. Disabling the caching of this loader ensures
     // we regenerate our specs and include any new ones in the compilation.
     ctx.cacheable(false);

diff --git a/dist/makeRspackConfig.d.ts b/dist/makeRspackConfig.d.ts
@@ -2,7 +2,7 @@
 import type { CreateFinalRspackConfig } from './createRspackDevServer';
 export declare const CYPRESS_RSPACK_ENTRYPOINT: string;
 /**
- * Creates a rspack 0 compatible rspack "configuration"
+ * Creates a rspack compatible rspack "configuration"
  * to pass to the sourced rspack function
  */
 export declare function makeRspackConfig(config: CreateFinalRspackConfig): Promise<{

diff --git a/dist/makeRspackConfig.js b/dist/makeRspackConfig.js
@@ -25,7 +25,7 @@ const removeList = [
 exports.CYPRESS_RSPACK_ENTRYPOINT = path.resolve(__dirname, 'browser.js');
 /**
  * Removes and/or modifies certain plugins known to conflict
- * when used with cypress-rspack-dev-server.
+ * when used with @rspack/dev-server.
  */
 function modifyRspackConfigForCypress(rspackConfig) {
     if (rspackConfig === null || rspackConfig === void 0 ? void 0 : rspackConfig.plugins) {
@@ -40,7 +40,7 @@ async function getRspackConfigFromProjectRoot(projectRoot) {
     return await findUp(constants_1.configFiles, { cwd: projectRoot });
 }
 /**
- * Creates a rspack 0 compatible rspack "configuration"
+ * Creates a rspack compatible rspack "configuration"
  * to pass to the sourced rspack function
  */
 async function makeRspackConfig(config) {

diff --git a/package.json b/package.json
@@ -7,11 +7,12 @@
     "build": "pnpm tsc || echo 'built, with type errors'",
     "build-prod": "pnpm build",
     "check-ts": "pnpm tsc --noEmit",
-    "dev": "DEBUG=cypress:rspack-dev-server:* tsc --watch",
+    "dev": "pnpm with:comment tsc --watch",
     "clean": "rimraf dist",
-    "cypress:run": "pnpm cypress:run-cypress-in-cypress node ../../scripts/cypress run --project . --browser chrome",
-    "cypress:run-cypress-in-cypress": "cross-env CYPRESS_INTERNAL_E2E_TESTING_SELF_PARENT_PROJECT=1 HTTP_PROXY_TARGET_FOR_ORIGIN_REQUESTS=http://localhost:4455 CYPRESS_REMOTE_DEBUGGING_PORT=6666 TZ=America/New_York",
-    "cypress:open": "pnpm cypress:run-cypress-in-cypress gulp open --project .",
+    "cypress:run": "cypress run --component --project ./cypress --browser chrome --config-file config/cypress.config.ts",
+    "cypress:run-with-comment": "pnpm  with:comment cypress run --component --project ./cypress --browser chrome --config-file config/cypress.config.ts",
+    "cypress:open": "cypress open --component --project ./cypress --browser chrome --config-file config/cypress.config.ts",
+    "with:comment": "cross-env DEBUG=cypress-rspack-dev-server:*",
     "lint": "eslint .",
     "test": "jest"
   },
@@ -50,6 +51,8 @@
     "path": "^0.12.7",
     "prettier": "^3.1.0",
     "proxyquire": "2.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sinon": "^13.0.1",
     "snap-shot-it": "^7.9.6",
     "ts-node": "^10.9.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/helpers/sourceRelativeRspackModules.ts b/src/helpers/sourceRelativeRspackModules.ts
@@ -225,21 +225,6 @@ export function sourceDefaultRspackDependencies(
   return { framework, rspack, rspackDevServer }
 }
 
-// export function getMajorVersion<T extends number>(json: PackageJson, acceptedVersions: T[]): T {
-//   const major = Number(json.version.split('.')[0])
-
-//   if (!acceptedVersions.includes(major as T)) {
-//     throw new Error(
-//       `Unexpected major version of ${json.name}. ` +
-//         `Cypress-rspack-dev-server works with ${json.name} versions ${acceptedVersions.join(
-//           ', ',
-//         )} - saw ${json.version}`,
-//     )
-//   }
-
-//   return Number(major) as T
-// }
-
 export function restoreLoadHook() {
   ;(Module as ModuleClass)._load = originalModuleLoad
   ;(Module as ModuleClass)._resolveFilename = originalModuleResolveFilename

diff --git a/src/loader.ts b/src/loader.ts
@@ -75,7 +75,7 @@ function buildSpecs(projectRoot: string, files: Cypress.Cypress['spec'][] = []):
 export default function loader(this: unknown) {
   const ctx = this as CypressCTRspackContext & LoaderContext<void>
 
-  // In Webpack 5, a spec added after the dev-server is created won't
+  // A spec added after the dev-server is created won't
   // be included in the compilation. Disabling the caching of this loader ensures
   // we regenerate our specs and include any new ones in the compilation.
   ctx.cacheable(false)

diff --git a/src/makeRspackConfig.ts b/src/makeRspackConfig.ts
@@ -29,7 +29,7 @@ export const CYPRESS_RSPACK_ENTRYPOINT = path.resolve(__dirname, 'browser.js')
 
 /**
  * Removes and/or modifies certain plugins known to conflict
- * when used with cypress-rspack-dev-server.
+ * when used with @rspack/dev-server.
  */
 function modifyRspackConfigForCypress(rspackConfig: Partial<Configuration>) {
   if (rspackConfig?.plugins) {
@@ -52,7 +52,7 @@ async function getRspackConfigFromProjectRoot(projectRoot: string) {
 }
 
 /**
- * Creates a rspack 0 compatible rspack "configuration"
+ * Creates a rspack compatible rspack "configuration"
  * to pass to the sourced rspack function
  */
 export async function makeRspackConfig(config: CreateFinalRspackConfig) {

diff --git a/tsconfig.json b/tsconfig.json
@@ -28,7 +28,7 @@
 
     /* Module Resolution Options */
     // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                       /* List of folders to include type definitions from. */