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

.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'

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) => {

cypress/integration/navigation.spec.ts

@@ -6,7 +6,9 @@ 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();
+    cy.get('#storybook-explorer-searchfield').type('syntax');
 
     cy.get('#storybook-explorer-menu button')
       .should('contain', 'SyntaxHighlighter')
@@ -14,7 +16,9 @@ describe('Navigation', () => {
   });
 
   it('should display no results after searching a non-existing navigation item', () => {
-    cy.get('#storybook-explorer-searchfield').click().clear().type('zzzzzzzzzz');
+    cy.get('#storybook-explorer-searchfield').click();
+    cy.get('#storybook-explorer-searchfield').clear();
+    cy.get('#storybook-explorer-searchfield').type('zzzzzzzzzz');
 
     cy.get('#storybook-explorer-menu button').should('be.hidden');
   });

cypress/support/commands.js

@@ -105,6 +105,11 @@ Cypress.Commands.add('navigateToStory', (kind, name) => {
   }
   cy.get(storyLinkId).click();
 
+  // FIXME: Find a way to not wait like this but check for an element in the UI
+  // A pause is good when switching stories
+  // eslint-disable-next-line cypress/no-unnecessary-waiting
+  cy.wait(300);
+
   // assert url changes
   cy.url().should('include', `path=/story/${kindId}--${storyId}`);
   cy.get(storyLinkId).should('have.attr', 'data-selected', 'true');

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')

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",