chore: upgrade Cypress and also Node.js version used in e2e tests

storybookjs · Oct 6, 2021 · 15da677 · 15da677
1 parent 2d920aa
commit 15da677
Show file tree

Hide file tree

Showing 6 changed files with 224 additions and 150 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -27,7 +27,7 @@ executors:
         environment:
           NODE_OPTIONS: --max_old_space_size=3076
     resource_class: <<parameters.class>>
-  sb_cypress_6_node_12:
+  sb_cypress_8_node_14:
     parameters:
       class:
         description: The Resource class
@@ -37,8 +37,8 @@ executors:
     working_directory: /tmp/storybook
     docker:
       # ⚠️ The Cypress docker image is based on Node.js one so be careful when updating it because it can also
-      # cause an upgrade of the Node.
-      - image: cypress/included:6.8.0
+      # cause an upgrade of Node.js version too. Cypress 8.5 image is based on Node.js 14
+      - image: cypress/included:8.5.0
         environment:
           NODE_OPTIONS: --max_old_space_size=3076
     resource_class: <<parameters.class>>
@@ -169,7 +169,7 @@ jobs:
   e2e-tests-extended:
     executor:
       class: medium
-      name: sb_cypress_6_node_12
+      name: sb_cypress_8_node_14
     parallelism: 4
     steps:
       - when:
@@ -203,7 +203,7 @@ jobs:
   e2e-tests-core:
     executor:
       class: large
-      name: sb_cypress_6_node_12
+      name: sb_cypress_8_node_14
     parallelism: 2
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -229,7 +229,7 @@ jobs:
   cra-bench:
     executor:
       class: medium
-      name: sb_cypress_6_node_12
+      name: sb_cypress_8_node_14
     working_directory: /tmp/storybook
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -253,7 +253,7 @@ jobs:
   e2e-tests-pnp:
     executor:
       class: medium
-      name: sb_cypress_6_node_12
+      name: sb_cypress_8_node_14
     working_directory: /tmp/storybook
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -276,7 +276,7 @@ jobs:
   e2e-tests-examples:
     executor:
       class: small
-      name: sb_cypress_6_node_12
+      name: sb_cypress_8_node_14
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

diff --git a/cypress/helper.ts b/cypress/helper.ts
@@ -11,22 +11,19 @@ const getUrl = (route: string) => {
 };
 
 export const visit = (route = '') => {
-  return cy
-    .clearLocalStorage()
-    .visit(getUrl(route))
-    .get(`#storybook-preview-iframe`)
-    .then({ timeout: 15000 }, (iframe) => {
-      return cy.wrap(iframe, { timeout: 10000 }).should(() => {
-        const content: Document | null = (iframe[0] as HTMLIFrameElement).contentDocument;
-        const element: HTMLElement | null = content !== null ? content.documentElement : null;
+  cy.clearLocalStorage().visit(getUrl(route));
+  return cy.get(`#storybook-preview-iframe`).then({ timeout: 15000 }, (iframe) => {
+    return cy.wrap(iframe, { timeout: 10000 }).should(() => {
+      const content: Document | null = (iframe[0] as HTMLIFrameElement).contentDocument;
+      const element: HTMLElement | null = content !== null ? content.documentElement : null;
 
-        expect(element).not.null;
+      expect(element).not.null;
 
-        if (element !== null) {
-          expect(element.querySelector('#root > *')).not.null;
-        }
-      });
+      if (element !== null) {
+        expect(element.querySelector('#root > *')).not.null;
+      }
     });
+  });
 };
 
 export const clickAddon = (addonName: Addons) => {

diff --git a/cypress/integration/navigation.spec.ts b/cypress/integration/navigation.spec.ts
@@ -6,7 +6,8 @@ describe('Navigation', () => {
   });
 
   it('should search navigation item', () => {
-    cy.get('#storybook-explorer-searchfield').click().clear().type('syntax');
+    cy.get('#storybook-explorer-searchfield').click();
+    cy.get('#storybook-explorer-searchfield').clear().type('syntax');
 
     cy.get('#storybook-explorer-menu button')
       .should('contain', 'SyntaxHighlighter')

diff --git a/cypress/support/index.js b/cypress/support/index.js
@@ -16,5 +16,13 @@
 // Import commands.js using ES2015 syntax:
 import './commands';
 
+// Turn off all uncaught exception handling
+// https://docs.cypress.io/guides/references/migration-guide#Uncaught-exception-and-unhandled-rejections
+Cypress.on('uncaught:exception', (err, runnable) => {
+  // returning false here prevents Cypress from
+  // failing the test
+  return false;
+});
+
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
diff --git a/package.json b/package.json
@@ -313,8 +313,8 @@
     }
   },
   "optionalDependencies": {
-    "@cypress/webpack-preprocessor": "^5.7.0",
-    "cypress": "6.8.0",
+    "@cypress/webpack-preprocessor": "^5.9.1",
+    "cypress": "8.5.0",
     "puppeteer": "^2.1.1",
     "ts-loader": "^8.0.14",
     "verdaccio": "^4.10.0",