feat: upgrade cypress [TOL-1036]

.circleci/config.yml

@@ -78,14 +78,14 @@ jobs:
       - yarn_serve
       - run:
           command: |
-            TESTFILES=$(circleci tests glob "cypress/integration/**/*.ts" | circleci tests split --split-by=timings --timings-type=filename | tr '\n' ',')
+            TESTFILES=$(circleci tests glob "cypress/e2e/**/*.ts" | circleci tests split --split-by=timings --timings-type=filename | tr '\n' ',')
             npx cypress run \
               --spec "${TESTFILES}" \
               --reporter junit \
-              --reporter-options "mochaFile=./cypress/reports/integration/test-results.[hash].xml" \
+              --reporter-options "mochaFile=./cypress/reports/e2e/test-results.[hash].xml" \
               --browser << parameters.browser >>
       - store_test_results:
-          path: cypress/reports/integration
+          path: cypress/reports/e2e
       - store_artifacts:
           path: cypress/screenshots
       - store_artifacts:
@@ -101,7 +101,7 @@ jobs:
           name: Run cypress component tests
           command: |
             TESTFILES=$(circleci tests glob cypress/component/**/*.ts | circleci tests split --split-by=timings --timings-type=filename | tr '\n' ',')
-            npx cypress run-ct \
+            npx cypress run --component \
               --spec "${TESTFILES}" \
               --reporter junit \
               --reporter-options "mochaFile=./cypress/reports/component/test-results.[hash].xml" \

.eslintignore

@@ -7,3 +7,4 @@ build/
 cypress/plugins/
 cypress/support/
 .eslintrc.js
+snapshots.js

.gitignore

@@ -18,4 +18,5 @@ cypress/reports
 cypress.env.json
 .vscode/
 .turbo
-reports/
+reports/
+snapshots.js

cypress.config.ts

@@ -0,0 +1,50 @@
+import { defineConfig } from 'cypress';
+
+// @ts-expect-error -- no types
+import webpackConfig from './webpack.config.js';
+
+const task = {
+  log(message: string) {
+    //eslint-disable-next-line no-console
+    console.log(message);
+
+    return null;
+  },
+  table(message: string) {
+    //eslint-disable-next-line no-console
+    console.table(message);
+
+    return null;
+  },
+};
+
+export default defineConfig({
+  retries: {
+    runMode: 2,
+    openMode: 0,
+  },
+  numTestsKeptInMemory: 1,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(_on, config) {
+      return config;
+    },
+    baseUrl: 'http://localhost:9000',
+    specPattern: 'cypress/e2e/**/*.spec.*',
+    excludeSpecPattern: ['**/__snapshots__/*', '**/__image_snapshots__/*'],
+  },
+  component: {
+    setupNodeEvents(on, config) {
+      on('task', task);
+      return config;
+    },
+    devServer: {
+      framework: 'react',
+      bundler: 'webpack',
+      webpackConfig,
+    },
+    specPattern: 'cypress/component/**/*.spec.{js,ts,jsx,tsx}',
+    excludeSpecPattern: ['**/__snapshots__/*', '**/__image_snapshots__/*'],
+  },
+});

cypress/component/mount.tsx

@@ -2,15 +2,18 @@ import React from 'react';
 
 import { GlobalStyles } from '@contentful/f36-core';
 import tokens from '@contentful/f36-tokens';
-import { mount as cyMount } from '@cypress/react';
-import { MountOptions } from '@cypress/react/dist/mount';
+import { mount as cyMount, MountReturn } from '@cypress/react';
+import { MountOptions } from '@cypress/react';
 import { Global } from '@emotion/core';
 
 function TestStyles() {
   return <Global styles={{ body: { padding: tokens.spacingM } }} />;
 }
 
-export function mount(node: React.ReactNode, options?: MountOptions) {
+export function mount(
+  node: React.ReactNode,
+  options?: MountOptions
+): Cypress.Chainable<MountReturn> {
   return cyMount(
     <>
       <GlobalStyles withNormalize={true} />

cypress/integration/rich-text/RichTextPage.ts → cypress/e2e/rich-text/RichTextPage.ts

@@ -117,9 +117,9 @@ export class RichTextPage {
     // eslint-disable-next-line
     cy.wait(500);
 
-    cy.getRichTextField().should((field) => {
+    cy.getRichTextField().then((field) => {
       //@ts-expect-error cypress-plugin-snapshots doesn't have type definitions
-      cy.wrap(field.getValue()).toMatchSnapshot();
+      cy.wrap(field.getValue()).snapshot();
     });
 
     // There can't be any validation error

cypress/plugins/index.js → cypress/plugins/index.ts

@@ -1,14 +1,14 @@
-const webpack = require('@cypress/webpack-preprocessor');
-const { initPlugin: initSnapshotPlugin } = require('cypress-plugin-snapshots/plugin');
-const path = require('path');
+import webpack from '@cypress/webpack-preprocessor';
+import { register } from '@cypress/snapshot';
+import path from 'path';
 
 const webpackFilename = path.join(__dirname, 'webpack.config.js');
 
-module.exports = (on, config) => {
+export const plugin = (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {
   if (config.testingType === 'e2e') {
     on('file:preprocessor', webpack({ webpackOptions: require(webpackFilename) }));
 
-    initSnapshotPlugin(on, config);
+    register();
   }
 
   if (config.testingType === 'component') {

cypress/support/commands.js

@@ -10,7 +10,9 @@
 
 import '@testing-library/cypress/add-commands';
 import { configure } from '@testing-library/cypress';
+import { register } from '@cypress/snapshot';
 
+register();
 configure({ testIdAttribute: 'data-test-id' });
 
 Cypress.Commands.add('editorEvents', (lastN = Infinity) => {

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>

cypress/support/component.ts

@@ -0,0 +1,42 @@
+// ***********************************************************
+// 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/react';
+import '@testing-library/cypress';
+import '@testing-library/cypress/add-commands';
+
+import { configure } from '@testing-library/cypress';
+
+configure({ testIdAttribute: 'data-test-id' });
+
+// 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);

cypress/support/index.js → cypress/support/e2e.js

@@ -16,6 +16,6 @@ require('cypress-plugin-tab');
 import './commands';
 
 if (Cypress.testingType === 'e2e') {
-  require('cypress-plugin-snapshots/commands');
+  require('@cypress/snapshot');
   require('cypress-plugin-tab');
 }

cypress/tsconfig.json

@@ -5,14 +5,14 @@
     "baseUrl": "../node_modules",
     "lib": ["es5", "dom"],
     "target": "ES6",
-    "types": ["cypress", "@types/testing-library__cypress"],
-    "resolveJsonModule": true,
+    "types": ["cypress", "@types/testing-library__cypress", "jest"],
+    "resolveJsonModule": true
   },
   "include": [
     "**/*.ts",
-    "../packages",
     "../cypress",
     "../node_modules/cypress",
     "../node_modules/@types/testing-library__cypress"
-  ]
+  ],
+  "exclude": ["**/*.test.tsx"]
 }

package.json

@@ -24,7 +24,7 @@
     "cy:open": "TZ=UTC cypress open",
     "cy:open:ct": "TZ=UTC cypress open-ct",
     "cy:run": "TZ=UTC cypress run --browser chrome",
-    "cy:run:ct": "TZ=UTC cypress run-ct --browser chrome",
+    "cy:run:ct": "TZ=UTC cypress run --component --browser chrome",
     "docz:dev": "docz dev",
     "docz:build": "docz build && cp _redirects .docz/dist",
     "cm": "git-cz",
@@ -41,6 +41,7 @@
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
     "@babel/plugin-proposal-optional-chaining": "^7.9.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-syntax-flow": "7.21.4",
     "@babel/plugin-transform-runtime": "^7.9.6",
     "@babel/preset-env": "7.12.11",
     "@babel/preset-react": "7.13.13",
@@ -50,9 +51,8 @@
     "@contentful/eslint-config-extension": "0.4.2",
     "@contentful/f36-components": "^4.10.0",
     "@contentful/f36-tokens": "^4.0.1",
-    "@cypress/react": "^5.3.0",
-    "@cypress/webpack-dev-server": "^1.8.4",
-    "@cypress/webpack-preprocessor": "^5.11.0",
+    "@cypress/snapshot": "2.1.7",
+    "@cypress/react": "^7.0.3",
     "@testing-library/cypress": "^8.0.2",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "11.2.6",
@@ -67,8 +67,7 @@
     "@typescript-eslint/parser": "^4.10.0",
     "ajv": "^8.8.2",
     "contentful-cli": "^1.3.29",
-    "cypress": "^9.2.0",
-    "cypress-plugin-snapshots": "^1.4.4",
+    "cypress": "^12.9.0",
     "cypress-plugin-tab": "^1.0.5",
     "cz-lerna-changelog": "^2.0.2",
     "docz": "1.3.2",
@@ -86,12 +85,13 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "git-cz": "4.7.6",
-    "html-webpack-plugin": "^4.5.2",
+    "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.0",
     "lerna": "^3.20.2",
     "lint-staged": "10.5.4",
     "mocha": "^8.0.1",
     "prettier": "2.7.1",
+    "process": "0.11.10",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "remark-cli": "^8.0.0",
@@ -107,9 +107,9 @@
     "turbo": "^1.0.23",
     "type-fest": "^2.19.0",
     "typescript": "^4.4.2",
-    "webpack": "4.46.0",
     "jest": "29.5.0",
-    "jest-junit": "15.0.0"
+    "jest-junit": "15.0.0",
+    "webpack": "5.79.0"
   },
   "resolutions": {
     "@types/react": "^16.14.5",
@@ -118,6 +118,14 @@
     "react-dom": "16.14.0",
     "tsdx/**/typescript": "4.4.4"
   },
+  "browserslist": {
+    "production": "extends @contentful/browserslist-config",
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "prettier --write",

packages/_shared/src/CharCounter.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import tokens from '@contentful/f36-tokens';
 import { css, cx } from 'emotion';
 

packages/_shared/src/CharValidation.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { ValidationType } from './types';
 
 interface CharValidationProps {

packages/_shared/src/FieldConnector.test.tsx

@@ -1,7 +1,9 @@
+import * as React from 'react';
+
 import { createFakeFieldAPI } from '@contentful/field-editor-test-utils';
 import { render } from '@testing-library/react';
 import noop from 'lodash/noop';
-import * as React from 'react';
+
 import { FieldConnector, FieldConnectorChildProps } from './FieldConnector';
 
 it('does not rerender with outdated value after calling setValue', () => {

packages/_shared/src/ModalDialogLauncher.tsx

@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-use-before-define */
 
 import React from 'react';
-import isNumber from 'lodash/isNumber';
 import ReactDOM from 'react-dom';
-import { Modal, ModalHeader } from '@contentful/f36-components';
+
 import { OpenCustomWidgetOptions } from '@contentful/app-sdk';
+import { Modal, ModalHeader } from '@contentful/f36-components';
+import isNumber from 'lodash/isNumber';
 
 export function open(componentRenderer: (params: { onClose: Function; isShown: boolean }) => any) {
   let rootDom: any = null;

packages/_shared/src/PredefinedValuesError.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Note } from '@contentful/f36-note';
 
 export function PredefinedValuesError() {

packages/_shared/src/utils/constraints.ts

@@ -6,6 +6,7 @@
  */
 
 import isNumber from 'lodash/isNumber';
+
 import { ValidationType } from '../types';
 
 export function fromFieldValidations(

packages/_test/src/ActionsPlayground.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { Emitter } from 'mitt';
-import { css } from 'emotion';
+
 import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+import type { Emitter } from 'mitt';
 
 type EventDefinition = { type?: string; value: any; id: number };