Merge pull request #30559 from cypress-io/chore/merge_develop

chore: merge `develop` into `release/14.0.0`

.circleci/cache-version.txt

@@ -1,3 +1,3 @@
 # Bump this version to force CI to re-create the cache from scratch.
 
-11-1-24
+11-6-24

.github/workflows/update_v8_snapshot_cache.yml

@@ -45,7 +45,7 @@ concurrency:
 jobs:
   update-v8-snapshot-cache:
     strategy:
-      max-parallel: 1
+      max-parallel: 3
       matrix:
         platform: [ubuntu-latest, macos-latest, windows-latest]
     runs-on: ${{ matrix.platform }}
@@ -57,14 +57,20 @@ jobs:
     steps:
       - name: Determine snapshot files - Windows
         if: ${{ matrix.platform == 'windows-latest' }}
-        run: echo "SNAPSHOT_FILES='tooling\v8-snapshot\cache\win32\snapshot-meta.json'" >> $GITHUB_ENV
+        run: |
+          echo "SNAPSHOT_FILES='tooling\v8-snapshot\cache\win32\snapshot-meta.json'" >> $GITHUB_ENV
+          echo "PLATFORM=windows" >> $GITHUB_ENV
         shell: bash
       - name: Determine snapshot files - Linux
         if: ${{ matrix.platform == 'ubuntu-latest' }}
-        run: echo "SNAPSHOT_FILES='tooling/v8-snapshot/cache/linux/snapshot-meta.json'" >> $GITHUB_ENV
+        run: |
+          echo "SNAPSHOT_FILES='tooling/v8-snapshot/cache/linux/snapshot-meta.json'" >> $GITHUB_ENV
+          echo "PLATFORM=linux" >> $GITHUB_ENV
       - name: Determine snapshot files - Mac
         if: ${{ matrix.platform == 'macos-latest' }}
-        run: echo "SNAPSHOT_FILES='tooling/v8-snapshot/cache/darwin/snapshot-meta.json'" >> $GITHUB_ENV
+        run: |
+          echo "SNAPSHOT_FILES='tooling/v8-snapshot/cache/darwin/snapshot-meta.json'" >> $GITHUB_ENV
+          echo "PLATFORM=darwin" >> $GITHUB_ENV
       - name: Install setuptools - Mac
         if: ${{ matrix.platform == 'macos-latest' }}
         run: sudo -H pip install setuptools
@@ -85,7 +91,8 @@ jobs:
           node-version: 20
           cache: 'yarn'
       - name: Run yarn
-        run: yarn
+        # set the timeout here to try and deal with Windows slowness
+        run: yarn --network-timeout 300000
       - name: Run build
         run: yarn build
       - name: Generate prod snapshot from scratch
@@ -108,14 +115,17 @@ jobs:
       - name: Determine branch name - commit to separate branch
         if: ${{ inputs.commit_directly_to_branch != true }}
         run: |
-          echo "BRANCH_NAME=update-v8-snapshot-cache-on-${{ env.BASE_BRANCH }}" >> $GITHUB_ENV
-          echo "BRANCH_EXISTS=$(git show-ref --verify --quiet refs/remotes/origin/update-v8-snapshot-cache-on-${{ env.BASE_BRANCH }} && echo 'true')" >> $GITHUB_ENV
+          echo "BRANCH_NAME=update-v8-snapshot-cache-on-${{ env.BASE_BRANCH }}-${{ env.PLATFORM }}" >> $GITHUB_ENV
+          echo "BRANCH_EXISTS=$(git show-ref --verify --quiet refs/remotes/origin/update-v8-snapshot-cache-on-${{ env.BASE_BRANCH }}-${{ env.PLATFORM }} && echo 'true')" >> $GITHUB_ENV
         shell: bash
       - name: Check need for PR or branch update
         id: check-need-for-pr
         run: |
-          echo "needs_pr=${{ steps.check-for-v8-snapshot-cache-changes.outputs.has_changes == 'true' && env.BRANCH_EXISTS != 'true' }}" >> $GITHUB_OUTPUT
+          echo "number_of_prs_for_branch=$(gh api '/repos/cypress-io/cypress/pulls?head=cypress-io:${{ env.BRANCH_NAME }}' --jq length)" >> $GITHUB_OUTPUT
+          echo "needs_pr=${{ steps.check-for-v8-snapshot-cache-changes.outputs.has_changes == 'true' && env.BRANCH_NAME != env.BASE_BRANCH && steps.check-need-for-pr.outputs.number_of_prs_for_branch == '0' }}" >> $GITHUB_OUTPUT
           echo "needs_branch_update=${{ steps.check-for-v8-snapshot-cache-changes.outputs.has_changes == 'true' && env.BRANCH_EXISTS == 'true' }}" >> $GITHUB_OUTPUT
+        env:
+          GH_TOKEN: ${{ secrets.BOT_GITHUB_ACTION_TOKEN }}
         shell: bash
       ## Update available and a branch/PR already exists
       - name: Checkout existing branch
@@ -128,7 +138,7 @@ jobs:
           git merge --squash -Xtheirs stash
       ## Update available and a PR doesn't already exist
       - name: Checkout new branch
-        if: ${{ steps.check-need-for-pr.outputs.needs_pr == 'true' }}
+        if: ${{ steps.check-need-for-pr.outputs.needs_branch_update != 'true' }}
         run: git checkout -b ${{ env.BRANCH_NAME }} ${{ env.BASE_BRANCH }}
       ## Commit changes if present
       - name: Commit the changes
@@ -152,7 +162,7 @@ jobs:
               github,
               baseBranch: '${{ env.BASE_BRANCH }}',
               branchName: '${{ env.BRANCH_NAME }}',
-              description: 'Update v8 snapshot cache',
+              description: 'Update v8 snapshot cache - ${{ env.PLATFORM }}',
               body: 'This PR was automatically generated by the [update-v8-snapshot-cache](https://github.com/cypress-io/cypress/actions/workflows/update_v8_snapshot_cache.yml) github action.',
               reviewers: ['ryanthemanuel']
             })

browser-versions.json

@@ -1,5 +1,5 @@
 {
   "chrome:beta": "131.0.6778.24",
-  "chrome:stable": "130.0.6723.91",
+  "chrome:stable": "130.0.6723.116",
   "chrome:minimum": "64.0.3282.0"
 }

cli/CHANGELOG.md

@@ -41,14 +41,20 @@ in this [GitHub issue](https://github.com/cypress-io/cypress/issues/30447). Addr
 
 ## 13.15.2
 
-_Released 11/5/2024 (PENDING)_
+_Released 11/5/2024_
+
+**Bugfixes:**
+
+- Fixed an issue where the Cypress runner could hang in `after` or `afterEach` hooks that run Cypress commands after a page load timeout error occurs. Addresses [#30238](https://github.com/cypress-io/cypress/issues/30238).
 
 **Misc:**
 
 - Fixed a typo in CLI `global` option help text. Addresses [#30531](https://github.com/cypress-io/cypress/issues/30531).
 
 **Dependency Updates:**
 
+- Updated `react` from `16.8.6` to `17.0.2` and `react-dom` from `16.8.6` to `17.0.2`. Addresses [#30510](https://github.com/cypress-io/cypress/issues/30510).
+- Updated `mobx` from `5.15.4` to `6.13.5` and `mobx-react` from `6.1.8` to `9.1.1`. Addresses [#30509](https://github.com/cypress-io/cypress/issues/30509).
 - Updated `@cypress/request` from `3.0.4` to `3.0.6`. Addressed in [#30488](https://github.com/cypress-io/cypress/pull/30488).
 
 

npm/react/cypress/component/basic/rerender/effects.cy.jsx

@@ -62,7 +62,12 @@ it('should run unmount effect cleanup when unmounting', () => {
 
     cy
     .then(() => ReactDom.unmountComponentAtNode(getContainerEl()))
-    .then(() => {
+    .then(async () => {
+      // does not call useEffect in react 17 unmount synchronously.
+      // @see https://github.com/facebook/react/issues/20263
+      // to keep this test working, we need to flush the microtask queue.
+      await new Promise((r) => setTimeout(r))
+
       expect(layoutEffectCleanup).to.have.been.callCount(1)
       expect(effectCleanup).to.have.been.callCount(1)
     })

npm/react/package.json

@@ -22,10 +22,10 @@
     "axios": "0.21.2",
     "cypress": "0.0.0-development",
     "prop-types": "15.7.2",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-router": "6.0.0-alpha.1",
-    "react-router-dom": "6.0.0-alpha.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-router": "6.10.0",
+    "react-router-dom": "6.10.0",
     "semver": "^7.5.3",
     "typescript": "~5.4.5",
     "vite": "5.2.11",

npm/react18/package.json

@@ -15,11 +15,11 @@
     "@cypress/react": "0.0.0-development",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.1.1",
-    "@types/react": "^16",
-    "@types/react-dom": "^16",
+    "@types/react": "17.0.83",
+    "@types/react-dom": "17.0.25",
     "cypress": "0.0.0-development",
-    "react": "^16",
-    "react-dom": "^16",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "rollup": "3.7.3",
     "rollup-plugin-typescript2": "^0.29.0",
     "typescript": "~5.4.5"

npm/webpack-preprocessor/package.json

@@ -7,7 +7,6 @@
   "scripts": {
     "build": "rimraf dist && tsc || echo 'built, with errors'",
     "check-ts": "tsc --noEmit",
-    "deps": "deps-ok && dependency-check --no-dev .",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx,.json, .",
     "secure": "nsp check",
     "semantic-release": "semantic-release",
@@ -33,11 +32,7 @@
     "chai": "4.1.2",
     "chalk": "3.0.0",
     "chokidar-cli": "2.1.0",
-    "common-tags": "^1.8.2",
     "cypress": "0.0.0-development",
-    "dependency-check": "2.9.1",
-    "deps-ok": "1.4.1",
-    "find-webpack": "1.5.0",
     "fs-extra": "^10.1.0",
     "mocha": "^7.1.0",
     "mockery": "2.1.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress",
-  "version": "13.15.1",
+  "version": "13.15.2",
   "description": "Cypress is a next generation front end testing tool built for the modern web",
   "private": true,
   "scripts": {
@@ -112,8 +112,8 @@
     "@types/mocha": "8.0.3",
     "@types/node": "20.16.0",
     "@types/prismjs": "1.16.0",
-    "@types/react": "16.9.50",
-    "@types/react-dom": "16.9.8",
+    "@types/react": "17.0.83",
+    "@types/react-dom": "17.0.25",
     "@types/request-promise": "4.1.45",
     "@types/send": "^0.17.1",
     "@types/sinon-chai": "3.2.3",
@@ -175,6 +175,8 @@
     "listr2": "3.8.3",
     "lodash": "^4.17.21",
     "minimist": "1.2.8",
+    "mobx": "6.13.5",
+    "mobx-react": "9.1.1",
     "mocha": "3.5.3",
     "mocha-banner": "1.1.2",
     "mocha-junit-reporter": "2.2.0",
@@ -187,14 +189,16 @@
     "pluralize": "8.0.0",
     "print-arch": "1.0.0",
     "proxyquire": "2.1.3",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "rimraf": "5.0.10",
     "semantic-release": "22.0.12",
     "semantic-release-monorepo": "8.0.2",
     "semver": "7.5.3",
     "shelljs": "0.8.5",
     "sinon": "7.3.2",
     "snap-shot-it": "7.9.10",
-    "stop-only": "3.0.1",
+    "stop-only": "3.4.1",
     "strip-ansi": "6.0.1",
     "tar": "6.1.15",
     "term-to-html": "1.2.0",
@@ -263,7 +267,6 @@
   "resolutions": {
     "**/@types/cheerio": "0.22.21",
     "**/@types/enzyme": "3.10.5",
-    "**/@types/react": "16.9.50",
     "**/@wdio/logger": "9.0.0",
     "**/jquery": "3.7.1",
     "**/pretty-format": "26.4.0",

packages/app/package.json

@@ -58,7 +58,6 @@
     "javascript-time-ago": "2.3.8",
     "just-my-luck": "3.0.0",
     "lodash": "4.17.21",
-    "mobx": "5.15.4",
     "nanoid": "3.3.4",
     "pinia": "2.0.0-rc.14",
     "rollup-plugin-copy": "3.4.0",

packages/app/src/store/mobx-runner-store.ts

@@ -1,5 +1,5 @@
 import { nanoid } from 'nanoid'
-import { action, observable } from 'mobx'
+import { action, observable, makeObservable } from 'mobx'
 import type { AutomationStatus } from '../store'
 
 const defaults = {
@@ -25,6 +25,7 @@ export class MobxRunnerStore {
   @observable canSaveStudioLogs = false
 
   constructor (testingType: Cypress.TestingType) {
+    makeObservable(this)
     this.width = defaults[testingType].width
     this.height = defaults[testingType].height
   }

packages/app/tsconfig.json

@@ -13,6 +13,7 @@
   ],
   "compilerOptions": {
     "noImplicitThis": true,
+    "useDefineForClassFields": true,
     "paths": {
       "@cy/i18n": ["../frontend-shared/src/locales/i18n"],
       "@cy/components/*": ["../frontend-shared/src/components/*"],

packages/driver/cypress/e2e/issues/30238.cy.js

@@ -0,0 +1,34 @@
+after(() => {
+  // ensure that we're stable in the after hooks
+  expect(cy.state('isStable')).to.be.true
+
+  // ensure we can enqueue a command without timing out
+  cy.then(() => {
+    expect(true).to.be.true
+  })
+})
+
+afterEach(() => {
+  // ensure that we're stable in the after hooks
+  expect(cy.state('isStable')).to.be.true
+
+  // ensure that we can enqueue a command without timing out
+  cy.then(() => {
+    expect(true).to.be.true
+  })
+})
+
+it('runs an after block without timing out when the page load times out', { pageLoadTimeout: 500 }, () => {
+  cy.on('fail', (error) => {
+    expect(error.message).to.include('Timed out after')
+
+    return false
+  })
+
+  cy.on('window:before:load', (win) => {
+    // Stop the page from loading so that the page load times out
+    win.stop()
+  })
+
+  cy.visit('/fixtures/generic.html')
+})

packages/driver/cypress/support/utils.ts

@@ -10,7 +10,7 @@ export const getCommandLogWithText = (command, type = 'method') => {
 }
 
 export const findReactInstance = function (dom) {
-  let key = _.keys(dom).find((key) => key.startsWith('__reactInternalInstance$')) as string
+  let key = _.keys(dom).find((key) => key.startsWith('__reactFiber')) as string
   let internalInstance = dom[key]
 
   if (internalInstance == null) return null

packages/driver/src/cypress/command_queue.ts

@@ -223,6 +223,9 @@ export class CommandQueue extends Queue<$Command> {
     // end in case we have after / afterEach hooks
     // which need to run
     this.index = this.length
+
+    // Mark the state as stable, so that any cypress commands can be re-queued during the after / afterEach hooks
+    this.state('isStable', true)
   }
 
   private runCommand (command: $Command) {

packages/example/package.json

@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "cross-env": "6.0.3",
-    "cypress-example-kitchensink": "3.1.0",
+    "cypress-example-kitchensink": "3.1.1",
     "gh-pages": "5.0.0",
     "gulp": "4.0.2",
     "gulp-clean": "0.4.0",

packages/reporter/package.json

@@ -27,12 +27,8 @@
     "cypress-real-events": "1.6.0",
     "lodash": "^4.17.21",
     "markdown-it": "^14.0.0",
-    "mobx": "5.15.4",
-    "mobx-react": "6.1.8",
     "prismjs": "1.27.0",
     "prop-types": "15.7.2",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
     "sinon": "7.5.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"

packages/reporter/src/agents/agent-model.ts

@@ -1,4 +1,4 @@
-import { observable } from 'mobx'
+import { observable, makeObservable } from 'mobx'
 import Instrument, { InstrumentProps } from '../instruments/instrument-model'
 
 export interface AgentProps extends InstrumentProps {
@@ -13,6 +13,8 @@ export default class Agent extends Instrument {
   constructor (props: AgentProps) {
     super(props)
 
+    makeObservable(this)
+
     this.callCount = props.callCount
     this.functionName = props.functionName
   }

packages/reporter/src/attempts/attempt-model.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import { action, computed, observable } from 'mobx'
+import { action, computed, observable, makeObservable } from 'mobx'
 
 import Agent, { AgentProps } from '../agents/agent-model'
 import Command, { CommandProps } from '../commands/command-model'
@@ -47,6 +47,7 @@ export default class Attempt {
   _logs: {[key: string]: Log} = {}
 
   constructor (props: TestProps, test: Test) {
+    makeObservable(this)
     this.testId = props.id
     this.id = props.currentRetry || 0
     this.test = test

packages/reporter/src/commands/command-model.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import { action, computed, observable } from 'mobx'
+import { action, computed, observable, makeObservable } from 'mobx'
 
 import Err, { ErrProps } from '../errors/err-model'
 import Instrument, { InstrumentProps } from '../instruments/instrument-model'
@@ -131,6 +131,8 @@ export default class Command extends Instrument {
   constructor (props: CommandProps) {
     super(props)
 
+    makeObservable(this)
+
     if (props.err) {
       this.err = new Err(props.err)
     }