chore: update mobx from 5.15.4 to 6.13.5 and mobx-react from 6.1.8 to 9.1.1 inside @packages/reporter (#30514)

* chore: do the minimal to update mobx from 5 to 6 [run ci]

chore: update mobx-react from v7 to v9 [run ci]

bump cache [run ci]

* do not alias mobx or mobx-react. This causes an issue where webpack, in production mode, bundles the cjs production dependency of mobx (mobx.cjs.production.min.js) into cypress_runner.js (in the runner package), but @packages/app (bundled via vite), bundles mobx.esm.js, which is NOT minimized and is expecting the global store/state set by the app to also not be minimized. [run ci]

* run update on all machines [run ci]

* add changelog entry [run ci]

Author: AtofStryker

.circleci/cache-version.txt

@@ -1,3 +1,3 @@
 # Bump this version to force CI to re-create the cache from scratch.
 
-10-23-24
+11-1-24-mobx-bust-cache1

.circleci/workflows.yml

@@ -30,7 +30,7 @@ mainBuildFilters: &mainBuildFilters
         - /^release\/\d+\.\d+\.\d+$/
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
         - 'update-v8-snapshot-cache-on-develop'
-        - 'ryanm/chore/fix-windows-tests'
+        - 'chore/update_reporter_mobx'
         - 'publish-binary'
 
 # usually we don't build Mac app - it takes a long time
@@ -42,7 +42,7 @@ macWorkflowFilters: &darwin-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'ryanm/chore/fix-windows-tests', << pipeline.git.branch >> ]
+    - equal: [ 'chore/update_reporter_mobx', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -53,7 +53,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'ryanm/chore/fix-windows-tests', << pipeline.git.branch >> ]
+    - equal: [ 'chore/update_reporter_mobx', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -76,7 +76,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'ryanm/chore/fix-windows-tests', << pipeline.git.branch >> ]
+    - equal: [ 'chore/update_reporter_mobx', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -152,7 +152,7 @@ commands:
           name: Set environment variable to determine whether or not to persist artifacts
           command: |
             echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
-            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "ryanm/chore/fix-windows-tests" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "chore/update_reporter_mobx" ]]; then
                 export SHOULD_PERSIST_ARTIFACTS=true
             fi' >> "$BASH_ENV"
   # You must run `setup_should_persist_artifacts` command and be using bash before running this command

cli/CHANGELOG.md

@@ -13,6 +13,7 @@ _Released 11/5/2024 (PENDING)_
 
 **Dependency Updates:**
 
+- 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).
 
 ## 13.15.1

packages/app/package.json

@@ -58,7 +58,7 @@
     "javascript-time-ago": "2.3.8",
     "just-my-luck": "3.0.0",
     "lodash": "4.17.21",
-    "mobx": "5.15.4",
+    "mobx": "6.13.5",
     "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/reporter/package.json

@@ -27,8 +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",
+    "mobx": "6.13.5",
+    "mobx-react": "9.1.1",
     "prismjs": "1.27.0",
     "prop-types": "15.7.2",
     "react": "16.8.6",

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

packages/reporter/src/commands/command.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import cs from 'classnames'
 import Markdown from 'markdown-it'
-import { action, observable } from 'mobx'
+import { action, observable, makeObservable } from 'mobx'
 import { observer } from 'mobx-react'
 import React, { Component } from 'react'
 import Tooltip from '@cypress/react-tooltip'
@@ -379,6 +379,11 @@ class Command extends Component<Props> {
     runnablesStore,
   }
 
+  constructor (props: Props) {
+    super(props)
+    makeObservable(this)
+  }
+
   render () {
     const { model, aliasesWithDuplicates } = this.props
 

packages/reporter/src/errors/err-model.ts

@@ -1,6 +1,6 @@
 /* eslint-disable padding-line-between-statements */
 import _ from 'lodash'
-import { computed, observable } from 'mobx'
+import { computed, observable, makeObservable } from 'mobx'
 
 import type { FileDetails } from '@packages/types'
 
@@ -45,6 +45,7 @@ export default class Err {
   @observable isRecovered: boolean = false
 
   constructor (props?: Partial<ErrProps>) {
+    makeObservable(this)
     this.update(props)
   }
 

packages/reporter/src/header/stats-store.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import { action, computed, observable } from 'mobx'
+import { action, computed, observable, makeObservable } from 'mobx'
 import { TestState } from '../test/test-model'
 import { IntervalID } from '../lib/types'
 
@@ -25,6 +25,10 @@ class StatsStore {
 
   private _interval?: IntervalID
 
+  constructor () {
+    makeObservable(this)
+  }
+
   @computed get duration () {
     if (!this._startTime) return 0
 

packages/reporter/src/hooks/hook-model.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import { observable, computed } from 'mobx'
+import { observable, computed, makeObservable } from 'mobx'
 
 import { FileDetails } from '@packages/types'
 
@@ -30,6 +30,7 @@ export default class Hook implements HookProps {
   private _currentNumber = 1
 
   constructor (props: HookProps) {
+    makeObservable(this)
     this.hookId = props.hookId
     this.hookName = props.hookName
     this.invocationDetails = props.invocationDetails

packages/reporter/src/instruments/instrument-model.ts

@@ -1,4 +1,4 @@
-import { observable } from 'mobx'
+import { observable, makeObservable } from 'mobx'
 import { Instrument, TestState } from '@packages/types'
 
 export interface AliasObject {
@@ -38,6 +38,7 @@ export default class Log {
   testId: string
 
   constructor (props: InstrumentProps) {
+    makeObservable(this)
     this.id = props.id
     this.alias = props.alias
     this.aliasType = props.aliasType

packages/reporter/src/lib/app-state.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import { observable } from 'mobx'
+import { observable, makeObservable } from 'mobx'
 
 interface DefaultAppState {
   isPaused: boolean
@@ -36,6 +36,10 @@ class AppState {
   _resetAutoScrollingEnabledTo = true;
   [key: string]: any
 
+  constructor () {
+    makeObservable(this)
+  }
+
   startRunning () {
     this.isRunning = true
     this.isStopped = false

packages/reporter/src/lib/flash-on-click.tsx

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx'
+import { action, observable, makeObservable } from 'mobx'
 import { observer } from 'mobx-react'
 import PropTypes from 'prop-types'
 import React, { Children, cloneElement, Component, MouseEvent, ReactElement, ReactNode } from 'react'
@@ -27,6 +27,11 @@ class FlashOnClick extends Component<Props> {
 
   @observable _show = false
 
+  constructor (props: Props) {
+    super(props)
+    makeObservable(this)
+  }
+
   render () {
     const child = Children.only<ReactNode>(this.props.children)
 

packages/reporter/src/lib/switch.tsx

@@ -1,4 +1,4 @@
-import { action } from 'mobx'
+import { action, makeObservable } from 'mobx'
 import { observer } from 'mobx-react'
 import React, { Component } from 'react'
 
@@ -17,6 +17,11 @@ class Switch extends Component<Props> {
     onUpdate(e)
   }
 
+  constructor (props: Props) {
+    super(props)
+    makeObservable(this)
+  }
+
   render () {
     const { 'data-cy': dataCy, size = 'lg', value } = this.props
 

packages/reporter/src/main-runner.scss.d.ts

@@ -3,5 +3,6 @@
 interface CssExports {
 
 }
-export const cssExports: CssExports;
-export default cssExports;
+export const cssExports: CssExports
+
+export default cssExports

packages/reporter/src/routes/route-model.ts

@@ -1,4 +1,4 @@
-import { observable } from 'mobx'
+import { observable, makeObservable } from 'mobx'
 import Instrument, { InstrumentProps } from '../instruments/instrument-model'
 
 export interface RouteProps extends InstrumentProps {
@@ -17,6 +17,8 @@ export default class Route extends Instrument {
   constructor (props: RouteProps) {
     super(props)
 
+    makeObservable(this)
+
     this.isStubbed = props.isStubbed
     this.method = props.method
     this.numResponses = props.numResponses

packages/reporter/src/runnables/runnable-model.ts

@@ -1,4 +1,4 @@
-import { observable } from 'mobx'
+import { observable, makeObservable } from 'mobx'
 import { HookProps } from '../hooks/hook-model'
 
 export interface RunnableProps {
@@ -14,6 +14,7 @@ export default class Runnable {
   @observable hooks: Array<HookProps> = []
 
   constructor (props: RunnableProps, level: number) {
+    makeObservable(this)
     this.id = props.id
     this.title = props.title
     this.level = level

packages/reporter/src/runnables/runnables-store.ts

@@ -1,6 +1,6 @@
 import { TestFilter } from '@packages/types'
 import _ from 'lodash'
-import { action, observable } from 'mobx'
+import { action, observable, makeObservable } from 'mobx'
 import AgentModel, { AgentProps } from '../agents/agent-model'
 import CommandModel, { CommandProps } from '../commands/command-model'
 import { HookProps } from '../hooks/hook-model'
@@ -74,6 +74,7 @@ export class RunnablesStore {
   showingSnapshot = defaults.showingSnapshot
 
   constructor ({ appState, scroller }: Props) {
+    makeObservable(this)
     this.appState = appState
     this.scroller = scroller
   }

packages/reporter/src/runnables/suite-model.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import { computed, observable } from 'mobx'
+import { computed, observable, makeObservable } from 'mobx'
 import Runnable, { RunnableProps } from './runnable-model'
 import TestModel, { TestProps } from '../test/test-model'
 import { TestState } from '@packages/types'
@@ -13,6 +13,12 @@ export default class Suite extends Runnable {
   @observable children: Array<TestModel | Suite> = []
   type = 'suite'
 
+  constructor (props: SuiteProps, level: number) {
+    super(props, level)
+
+    makeObservable(this)
+  }
+
   @computed get state (): TestState {
     if (this._anyChildrenFailed) {
       return 'failed'

packages/reporter/src/sessions/sessions-model.ts

@@ -1,4 +1,4 @@
-import { observable } from 'mobx'
+import { observable, makeObservable } from 'mobx'
 import Instrument, { InstrumentProps } from '../instruments/instrument-model'
 import { determineTagType } from './utils'
 import type { SessionStatus } from './utils'
@@ -15,13 +15,14 @@ export interface SessionProps extends InstrumentProps {
 }
 
 export default class Session extends Instrument {
-  @observable name: string
+  name: string
   @observable status: string
   @observable isGlobalSession: boolean = false
   @observable tagType: string
 
   constructor (props: SessionProps) {
     super(props)
+    makeObservable(this)
     const { state, sessionInfo: { isGlobalSession, id, status } } = props
 
     this.isGlobalSession = isGlobalSession

packages/reporter/src/test/test-model.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import { action, computed, observable } from 'mobx'
+import { action, computed, observable, makeObservable } from 'mobx'
 
 import { FileDetails, TestState } from '@packages/types'
 import Attempt from '../attempts/attempt-model'
@@ -62,6 +62,8 @@ export default class Test extends Runnable {
   constructor (props: TestProps, level: number, private store: RunnablesStore) {
     super(props, level)
 
+    makeObservable(this)
+
     this.invocationDetails = props.invocationDetails
 
     this.hooks = [...props.hooks, {