chore(cypress): add component test cypress starter

arjunan-k · Dec 3, 2023 · 92b48b5 · 92b48b5
1 parent de83ba4
commit 92b48b5
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 0 deletions.
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -5,6 +5,21 @@ export default defineConfig({
  baseUrl: "http://localhost:3000",
  setupNodeEvents(on, config) {
  // implement node event listeners here
+ on("task", {
+ seedDatabase(fileName) {
+ // Run node js
+ // Edit files
+ console.log(`Cypress task running ${fileName}...`);
+ return fileName;
+ }
+ });
+ }
+ },
+
+ component: {
+ devServer: {
+ framework: "next",
+ bundler: "webpack"
  }
  }
 });
diff --git a/cypress/e2e/signUp.cy.ts b/cypress/e2e/signUp.cy.ts
@@ -12,6 +12,9 @@ describe(
  });
  it("should be able to click Register here ! for signing up to the application", () => {
  cy.visit("http://localhost:3000/");
+ cy.task("seedDatabase", "arjunank.json").then((returnValue) => {
+ console.log(returnValue);
+ });
  // cy.get(".signin-signup p span").click({ force: true });
  cy.get("[data-cy='registerHereButton']").then((el) => {
  expect(el.text("Register Here !"));

diff --git a/cypress/support/component-index.html b/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>
+ <!-- Used by Next.js to inject CSS. -->
+ <div id="__next_css__DO_NOT_USE__"></div>
+ </head>
+ <body>
+ <div data-cy-root></div>
+ </body>
+</html>
diff --git a/cypress/support/component.ts b/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'
+
+// 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)
+
+// Example use:
+// cy.mount(<MyComponent />)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
  "@semantic-release/git": "^10.0.1",
  "@semantic-release/github": "^9.2.1",
  "@semantic-release/release-notes-generator": "^12.0.0",
+ "@types/cypress": "^1.1.3",
  "@types/node": "^20.8.0",
  "@types/react": "^18.2.24",
  "@types/react-dom": "^18.2.8",