Reconfigured cypress / typescript / vite.

cypress.config.ts

@@ -13,6 +13,11 @@ export default defineConfig({
     devServer: {
       framework: "react",
       bundler: "vite",
+      viteConfig: {
+        server: {
+          port: 5174,
+        },
+      },
     },
   },
 });

cypress/e2e/app.cy.ts

@@ -1,5 +0,0 @@
-describe("template spec", () => {
-  it("passes", () => {
-    cy.visit("/");
-  });
-});

cypress/support/commands.js

@@ -1,25 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/commands.ts

@@ -34,4 +34,33 @@
 //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
 //     }
 //   }
-// }
+// }
+
+Cypress.Commands.add("dataCy", (value: string) => {
+  return cy.get(`[data-cy="${value}"]`);
+});
+
+Cypress.Commands.add("disableTransitions", () => {
+  cy.document().then((document) => {
+    const style = document.createElement("style");
+    style.id = "cypress-disable-transitions";
+    style.innerHTML = `
+      * {
+        transition: none !important;
+        animation: none !important;
+        animation-duration: 0ms !important;
+        transition-duration: 0ms !important;
+      }
+    `;
+    document.head.appendChild(style);
+  });
+});
+
+Cypress.Commands.add("enableTransitions", () => {
+  cy.document().then((document) => {
+    const styleElement = document.getElementById("cypress-disable-transitions");
+    if (styleElement) {
+      styleElement.remove();
+    }
+  });
+});

cypress/support/component.js

@@ -1,24 +0,0 @@
-// ***********************************************************
-// This example support/component.js 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'
-
-import { mount } from 'cypress/react'
-
-Cypress.Commands.add('mount', mount)
-
-// Example use:
-// cy.mount(<MyComponent />)

cypress/support/component.ts

@@ -0,0 +1,39 @@
+// ***********************************************************
+// 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";
+
+import { mount } from "cypress/react";
+
+// 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;
+      dataCy(value: string): Chainable<JQuery<HTMLElement>>;
+      disableTransitions(): Chainable;
+      enableTransitions(): Chainable;
+    }
+  }
+}
+
+Cypress.Commands.add("mount", mount);
+
+// Example use:
+// cy.mount(<MyComponent />)

package.json

@@ -2,7 +2,6 @@
   "name": "luminance",
   "private": true,
   "version": "0.0.0",
-  "type": "module",
   "scripts": {
     "build": "tsc -b && vite build",
     "build:wasm": "wasm-pack build colorlib -t bundler -d pkg --release",

tsconfig.cypress.json

@@ -1,10 +1,13 @@
 {
   "compilerOptions": {
     "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
     "lib": ["es5", "dom"],
+    "jsx": "react-jsx",
     "types": ["cypress", "node"],
-    "module": "CommonJS",
-    "moduleResolution": "node"
+    "sourceMap": true,
+    "preserveValueImports": false
   },
-  "include": ["cypress/**/*.ts", "cypress/**/*.tsx"]
+  "include": ["**/*.ts", "**/*.tsx"]
 }

tsconfig.json

@@ -2,7 +2,7 @@
   "files": [],
   "references": [
     { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
+    { "path": "./tsconfig.node.json" },
     { "path": "./tsconfig.cypress.json" }
   ]
 }

vite.config.ts

@@ -11,4 +11,7 @@ export default defineConfig({
     wasm(),
     topLevelAwait(),
   ],
+  server: {
+    port: 5173,
+  }
 })