Upgrade Cypress to v12 (#11011)

* Upgrade Cypress to v12.2.0
* Remove cy.unmount
* Only record video in CI
* Remove unmount definition and @cypress/react

GitOrigin-RevId: 463bc216b1debc65ad066f7c1d479724cfa062d1

services/web/cypress.config.ts

@@ -3,7 +3,7 @@ import { webpackConfig } from './cypress/support/webpack.cypress'
 
 export default defineConfig({
   fixturesFolder: 'cypress/fixtures',
-  video: true,
+  video: !!process.env.CI,
   screenshotsFolder: 'cypress/results',
   videosFolder: 'cypress/results',
   videoUploadOnPasses: false,

services/web/cypress/support/ct/commands/index.ts

@@ -1,4 +1,4 @@
-import { mount, unmount } from '@cypress/react'
+import { mount } from 'cypress/react'
 
 // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-namespace
 declare global {
@@ -7,10 +7,8 @@ declare global {
     // eslint-disable-next-line no-unused-vars
     interface Chainable {
       mount: typeof mount
-      unmount: typeof unmount
     }
   }
 }
 
 Cypress.Commands.add('mount', mount)
-Cypress.Commands.add('unmount', unmount)

services/web/docker-compose.cypress.yml

@@ -1,6 +1,6 @@
 services:
   cypress:
-    image: cypress/included:10.9.0
+    image: cypress/included:12.2.0
     volumes:
       - ../../:/overleaf
       - /tmp/.X11-unix:/tmp/.X11-unix

services/web/docker-compose.yml

@@ -76,7 +76,7 @@ services:
     user: node
 
   test_frontend_ct:
-    image: cypress/included:10.9.0
+    image: cypress/included:12.2.0
     volumes:
       - ../../:/overleaf
     working_dir: /overleaf/services/web

services/web/package.json

@@ -248,10 +248,9 @@
   },
   "devDependencies": {
     "@babel/register": "^7.14.5",
-    "@cypress/react": "^6.2.0",
     "@juggle/resize-observer": "^3.3.1",
     "@lezer/generator": "^1.1.3",
-    "@testing-library/cypress": "^8.0.3",
+    "@testing-library/cypress": "^9.0.0",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.0",
@@ -283,7 +282,7 @@
     "copy-webpack-plugin": "^10.2.4",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
-    "cypress": "^10.9.0",
+    "cypress": "12.2.0",
     "es6-promise": "^4.2.8",
     "escodegen": "^2.0.0",
     "eslint-config-standard-jsx": "^11.0.0-0",

services/web/test/frontend/components/pdf-preview/pdf-js-viewer.spec.tsx

@@ -1,6 +1,8 @@
 import { EditorProviders } from '../../helpers/editor-providers'
 import PdfJsViewer from '../../../../frontend/js/features/pdf-preview/components/pdf-js-viewer'
 import { mockScope } from './scope'
+import { getContainerEl } from 'cypress/react'
+import { unmountComponentAtNode } from 'react-dom'
 
 describe('<PdfJSViewer/>', function () {
   beforeEach(function () {
@@ -52,7 +54,7 @@ describe('<PdfJSViewer/>', function () {
       </EditorProviders>
     )
 
-    cy.unmount()
+    cy.then(() => unmountComponentAtNode(getContainerEl()))
   })
 
   it('can be unmounted after loading a document', function () {
@@ -68,6 +70,6 @@ describe('<PdfJSViewer/>', function () {
 
     cy.findByLabelText('Page 1')
 
-    cy.unmount()
+    cy.then(() => unmountComponentAtNode(getContainerEl()))
   })
 })