Cypress 7 (#206)

* cypress updated to v7

Author: pashidlos

.github/workflows/workflow.yml

@@ -16,9 +16,11 @@ jobs:
       - id: get-branch-name
         run: echo "::set-output name=branch_name::$(git symbolic-ref --short HEAD)"
         shell: bash
-
-      - name: Cypress run
+      
+      - name: Run Component tests 🧪
         uses: cypress-io/github-action@v2
+        with:
+          command: npm run test:cy
         env:
           VRT_APIURL: "http://162.243.161.172:4200"
           VRT_PROJECT: "VRT"

.gitignore

@@ -6,6 +6,7 @@
 .pnp.js
 
 # testing
+vrt.json
 .nyc_output/
 /coverage
 /cypress/screenshots

cypress.json

@@ -4,7 +4,6 @@
   "video": false,
   "screenshotOnRunFailure": false,
   "retries": 0,
-  "experimentalComponentTesting": true,
   "componentFolder": "src",
   "testFiles": "**/*.spec.*"
 }

cypress/plugins/index.js

@@ -1,9 +1,10 @@
 const {
   addVisualRegressionTrackerPlugin,
 } = require("@visual-regression-tracker/agent-cypress/dist/plugin");
+const injectReactScriptsDevServer = require("@cypress/react/plugins/react-scripts");
 
 module.exports = async (on, config) => {
-  require("cypress-react-unit-test/plugins/react-scripts")(on, config);
+  injectReactScriptsDevServer(on, config);
   addVisualRegressionTrackerPlugin(on, config);
   return config;
 };

cypress/support/index.js

@@ -15,12 +15,8 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-// Import commands.js using ES2015 syntax:
 import "./commands";
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-require("cypress-react-unit-test/support");
 
 before(() => {
   cy.vrtStart();

package-lock.json

@@ -25,30 +25,25 @@
     "react-material-ui-form-validator": "^2.1.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
-    "socket.io-client": "^2.3.0",
-    "typescript": "^3.9.7",
+    "socket.io-client": "^2.4.0",
+    "typescript": "^4.3.4",
     "use-image": "^1.0.6"
   },
   "scripts": {
     "start": "chmod +x ./env.sh && ./env.sh && cp env-config.js ./public/ && react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test"
+    "test": "react-scripts test",
+    "test:cy": "cypress run-ct"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
+  "browserslist": [
+    ">0.3%",
+    "not ie 11",
+    "not dead",
+    "not op_mini all"
+  ],
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
@@ -60,6 +55,8 @@
     ]
   },
   "devDependencies": {
+    "@cypress/react": "^5.9.1",
+    "@cypress/webpack-dev-server": "^1.4.0",
     "@types/jest": "^26.0.20",
     "@types/lodash": "^4.14.170",
     "@types/node": "^15.12.4",
@@ -69,8 +66,7 @@
     "@types/react-material-ui-form-validator": "^2.1.0",
     "@types/react-router-dom": "^5.1.5",
     "@types/socket.io-client": "^1.4.33",
-    "@visual-regression-tracker/agent-cypress": "^4.7.3",
-    "cypress": "^5.6.0",
-    "cypress-react-unit-test": "^4.17.0"
+    "@visual-regression-tracker/agent-cypress": "^5.0.0",
+    "cypress": "^7.6.0"
   }
 }

package.json

@@ -1,5 +1,5 @@
 import React from "react";
-import { mount } from "cypress-react-unit-test";
+import { mount } from "@cypress/react";
 import {
   ProjectProvider,
   AuthProvider,
@@ -34,6 +34,6 @@ export const mountVrtComponent = ({
       </Route>
     </MemoryRouter>,
     {
-      stylesheets: ["/__root/src/index.css"],
+      stylesheets: ["/src/index.css"],
     }
   );

src/_test/test.moun.helper.tsx

@@ -1,6 +1,6 @@
 /* global cy */
 import React from "react";
-import { mount } from "cypress-react-unit-test";
+import { mount } from "@cypress/react";
 import Filters from "./Filters";
 import { TestStatus } from "../types/testStatus";
 
@@ -30,6 +30,7 @@ describe("Filters", () => {
             branchName: "master",
             baselineBranchName: "baselineBranchName",
             merge: false,
+            tempIgnoreAreas: "[]",
           },
         ]}
         queryState={["Some query", cy.stub()]}
@@ -42,6 +43,6 @@ describe("Filters", () => {
       />
     );
 
-    cy.get("#cypress-root").vrtTrack("Filters");
+    cy.get("#__cy_root").vrtTrack("Filters");
   });
 });

src/components/Filters.spec.tsx

@@ -1,6 +1,6 @@
 /* global cy */
 import React from "react";
-import { mount } from "cypress-react-unit-test";
+import { mount } from "@cypress/react";
 import Header from "./Header";
 import { AuthProvider } from "../contexts";
 import { BrowserRouter } from "react-router-dom";
@@ -19,7 +19,7 @@ describe("Header", () => {
         </BrowserRouter>
       );
 
-      cy.get("#cypress-root").vrtTrack("Header. Guest");
+      cy.get("#__cy_root").vrtTrack("Header. Guest");
     });
 
     it("Logged", () => {
@@ -32,7 +32,7 @@ describe("Header", () => {
         </BrowserRouter>
       );
 
-      cy.get("#cypress-root").vrtTrack("Header. Logged");
+      cy.get("#__cy_root").vrtTrack("Header. Logged");
     });
   });
 });