chore(workspace): upgrade to cypress v11 (#2816)

urql-graphql · Nov 22, 2022 · 1504a44 · 1504a44
1 parent 1f51a1e
commit 1504a44
Show file tree

Hide file tree

Showing 15 changed files with 364 additions and 330 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -94,7 +94,7 @@ jobs:
       - name: e2e tests 🧪
         uses: cypress-io/github-action@v4
         with:
-          command: yarn cypress run-ct
+          command: yarn cypress run --component
           working-directory: packages/react-urql
 
   graphcache-e2e:
@@ -140,7 +140,7 @@ jobs:
       - name: e2e tests 🧪
         uses: cypress-io/github-action@v4
         with:
-          command: yarn cypress run-ct
+          command: yarn cypress run --component
           working-directory: exchanges/graphcache
 
   build:

diff --git a/exchanges/graphcache/cypress.config.js b/exchanges/graphcache/cypress.config.js
@@ -0,0 +1,21 @@
+// eslint-disable-next-line
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  video: false,
+
+  component: {
+    specPattern: './**/e2e-tests/*spec.tsx',
+    devServer: {
+      framework: 'react',
+      bundler: 'vite',
+      viteConfig: {
+        server: {
+          fs: {
+            allow: ['../..'],
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/exchanges/graphcache/cypress.json b/exchanges/graphcache/cypress.json
diff --git a/exchanges/graphcache/cypress/support/commands.js b/exchanges/graphcache/cypress/support/commands.js
diff --git a/exchanges/graphcache/cypress/support/component-index.html b/exchanges/graphcache/cypress/support/component-index.html
@@ -0,0 +1,12 @@
+<!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/...anges/graphcache/cypress/support/index.js → ...s/graphcache/cypress/support/component.js b/...anges/graphcache/cypress/support/index.js → ...s/graphcache/cypress/support/component.js
@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/index.js is processed and
+// This example support/component.js is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and
@@ -13,8 +13,9 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-// Import commands.js using ES2015 syntax:
-import './commands';
+import { mount } from 'cypress/react';
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+Cypress.Commands.add('mount', mount);
+
+// Example use:
+// cy.mount(<MyComponent />)
diff --git a/package.json b/package.json
@@ -83,7 +83,7 @@
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
     "cjs-module-lexer": "^1.2.2",
-    "cypress": "^9.5.1",
+    "cypress": "^11.0.0",
     "dotenv": "^8.2.0",
     "eslint": "^7.25.0",
     "eslint-config-prettier": "^8.3.0",

diff --git a/packages/react-urql/cypress.config.js b/packages/react-urql/cypress.config.js
@@ -0,0 +1,21 @@
+// eslint-disable-next-line
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  video: false,
+
+  component: {
+    specPattern: './**/e2e-tests/*spec.tsx',
+    devServer: {
+      framework: 'react',
+      bundler: 'vite',
+      viteConfig: {
+        server: {
+          fs: {
+            allow: ['..'],
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/packages/react-urql/cypress.json b/packages/react-urql/cypress.json
diff --git a/packages/react-urql/cypress/plugins/index.js b/packages/react-urql/cypress/plugins/index.js
diff --git a/packages/react-urql/cypress/support/commands.js b/packages/react-urql/cypress/support/commands.js
diff --git a/packages/react-urql/cypress/support/component-index.html b/packages/react-urql/cypress/support/component-index.html
@@ -0,0 +1,12 @@
+<!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/packages/react-urql/cypress/support/index.js → ...s/react-urql/cypress/support/component.js b/packages/react-urql/cypress/support/index.js → ...s/react-urql/cypress/support/component.js
@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/index.js is processed and
+// This example support/component.js is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and
@@ -13,8 +13,6 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-// Import commands.js using ES2015 syntax:
-import './commands';
+import { mount } from 'cypress/react';
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+Cypress.Commands.add('mount', mount);
diff --git a/packages/react-urql/package.json b/packages/react-urql/package.json
@@ -43,8 +43,8 @@
     "preset": "../../scripts/jest/preset"
   },
   "devDependencies": {
-    "@cypress/react": "^5.12.4",
-    "@cypress/vite-dev-server": "^2.2.2",
+    "@cypress/react": "^7.0.1",
+    "@cypress/vite-dev-server": "^4.0.1",
     "@testing-library/react": "^11.1.1",
     "@testing-library/react-hooks": "^5.1.2",
     "@types/react": "^17.0.4",
@@ -55,7 +55,7 @@
     "react-is": "^17.0.1",
     "react-ssr-prepass": "^1.1.2",
     "react-test-renderer": "^17.0.1",
-    "vite": "^2.8.6"
+    "vite": "^3.0.0"
   },
   "peerDependencies": {
     "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",