test: helper functions

cypress/support/commands.ts

@@ -35,3 +35,28 @@
 //     }
 //   }
 // }
+
+Cypress.Commands.add('getBySel', (selector, ...args) => {
+  return cy.get(`[data-cy=${selector}]`, ...args);
+});
+
+Cypress.Commands.add('getBySelLike', (selector, ...args) => {
+  return cy.get(`[data-cy*=${selector}]`, ...args);
+});
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      getBySel(
+        selector: string,
+        ...args: any[]
+      ): Chainable<JQuery<HTMLElement>>;
+      getBySelLike(
+        selector: string,
+        ...args: any[]
+      ): Chainable<JQuery<HTMLElement>>;
+    }
+  }
+}
+
+export {};

cypress/support/component.ts

@@ -13,6 +13,8 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+import '@/app/globals.css';
+
 // Import commands.js using ES2015 syntax:
 import './commands';
 

tsconfig.json

@@ -20,7 +20,8 @@
     ],
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "types": ["node", "cypress"]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]