fix reporter tests and run in CI

Author: AtofStryker

packages/reporter/cypress/e2e/agents.cy.ts

@@ -27,7 +27,7 @@ describe('agents', () => {
     })
 
     start = () => {
-      cy.get('.reporter').then(() => {
+      cy.get('.reporter.mounted').then(() => {
         runner.emit('runnables:ready', runnables)
         runner.emit('reporter:start', {})
       })

packages/reporter/cypress/e2e/aliases.cy.ts

@@ -26,7 +26,7 @@ describe('aliases', () => {
       })
     })
 
-    cy.get('.reporter').then(() => {
+    cy.get('.reporter.mounted').then(() => {
       runner.emit('runnables:ready', runnables)
       runner.emit('reporter:start', {})
     })

packages/reporter/cypress/e2e/commands.cy.ts

@@ -27,7 +27,7 @@ describe('commands', { viewportHeight: 1000 }, () => {
       })
     })
 
-    cy.get('.reporter').then(() => {
+    cy.get('.reporter.mounted').then(() => {
       runner.emit('runnables:ready', runnables)
       runner.emit('reporter:start', {})
       addCommand(runner, {

packages/reporter/cypress/e2e/header.cy.ts

@@ -32,7 +32,7 @@ describe('header', () => {
       })
     })
 
-    cy.get('.reporter').then(() => {
+    cy.get('.reporter.mounted').then(() => {
       runner.emit('runnables:ready', { ...runnables, testFilter: opts?.testFilter, totalUnfilteredTests: opts?.totalUnfilteredTests })
       runner.emit('reporter:start', {})
     })

packages/reporter/cypress/e2e/hooks.cy.ts

@@ -26,7 +26,7 @@ describe('hooks', () => {
       })
     })
 
-    cy.get('.reporter').then(() => {
+    cy.get('.reporter.mounted').then(() => {
       runner.emit('runnables:ready', runnables)
       runner.emit('reporter:start', {})
     })

packages/reporter/cypress/e2e/memory.cy.ts

@@ -29,7 +29,7 @@ function visitAndRenderReporter (studioEnabled: boolean = false, studioActive: b
     })
   })
 
-  cy.get('.reporter').then(() => {
+  cy.get('.reporter.mounted').then(() => {
     runner.emit('runnables:ready', runnables)
     runner.emit('reporter:start', { studioActive })
   })

packages/reporter/cypress/e2e/routes.cy.ts

@@ -27,7 +27,7 @@ describe('routes', () => {
     })
 
     start = () => {
-      cy.get('.reporter').then(() => {
+      cy.get('.reporter.mounted').then(() => {
         runner.emit('runnables:ready', runnables)
         runner.emit('reporter:start', {})
       })

packages/reporter/cypress/e2e/runnables.cy.ts

@@ -45,7 +45,7 @@ describe('runnables', () => {
     start = (renderProps?: Partial<BaseReporterProps>) => {
       render(renderProps)
 
-      return cy.get('.reporter').then(() => {
+      return cy.get('.reporter.mounted').then(() => {
         runner.emit('runnables:ready', runnables)
         runner.emit('reporter:start', {})
       })

packages/reporter/cypress/e2e/shortcuts.cy.ts

@@ -36,7 +36,7 @@ describe('shortcuts', function () {
       })
     })
 
-    cy.get('.reporter').then(() => {
+    cy.get('.reporter.mounted').then(() => {
       runner.emit('runnables:ready', this.runnables)
       runner.emit('reporter:start', {})
     })

packages/reporter/cypress/e2e/spec_title.cy.ts

@@ -13,7 +13,7 @@ describe('spec title', () => {
         win.render({ runner, runnerStore: { spec } })
       })
 
-      cy.get('.reporter').then(() => {
+      cy.get('.reporter.mounted').then(() => {
         runner.emit('runnables:ready', {})
         runner.emit('reporter:start', {})
       })

packages/reporter/cypress/e2e/suites.cy.ts

@@ -29,7 +29,7 @@ describe('suites', () => {
       })
     })
 
-    cy.get('.reporter').then(() => {
+    cy.get('.reporter.mounted').then(() => {
       runner.emit('runnables:ready', runnables)
       runner.emit('reporter:start', {})
     })

packages/reporter/cypress/e2e/test_errors.cy.ts

@@ -20,7 +20,7 @@ describe('test errors', () => {
         // @ts-ignore
         runnablesWithErr.suites[0].tests[0].err = err
 
-        cy.get('.reporter').then(() => {
+        cy.get('.reporter.mounted').then(() => {
           runner.emit('runnables:ready', runnablesWithErr)
           runner.emit('reporter:start', {})
         })

packages/reporter/cypress/e2e/tests.cy.ts

@@ -28,7 +28,7 @@ function visitAndRenderReporter (studioEnabled: boolean = false, studioActive: b
     })
   })
 
-  cy.get('.reporter').then(() => {
+  cy.get('.reporter.mounted').then(() => {
     runner.emit('runnables:ready', runnables)
     runner.emit('reporter:start', { studioActive })
   })

packages/reporter/src/main.tsx

@@ -2,7 +2,7 @@
 import { action, runInAction } from 'mobx'
 import { observer } from 'mobx-react'
 import cs from 'classnames'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { createRoot } from 'react-dom/client'
 // @ts-ignore
 import EQ from 'css-element-queries/src/ElementQueries'
@@ -53,12 +53,11 @@ export interface SingleReporterProps extends BaseReporterProps{
 
 const Reporter: React.FC<SingleReporterProps> = observer(({ runner, className, error, runMode = 'single', studioEnabled, autoScrollingEnabled, isSpecsListOpen, resetStatsOnSpecChange, renderReporterHeader = (props: ReporterHeaderProps) => <Header {...props}/>, runnerStore }) => {
   const previousSpecRunId = usePrevious(runnerStore.specRunId)
-  const mounted = useRef<boolean>()
+  const [isMounted, setIsMounted] = useState(false)
 
   useEffect(() => {
-    if (!mounted.current) {
+    if (!isMounted) {
       // do componentDidMount logic
-      mounted.current = true
 
       if (!runnerStore.spec) {
         throw Error(`Expected runnerStore.spec not to be null.`)
@@ -85,8 +84,11 @@ const Reporter: React.FC<SingleReporterProps> = observer(({ runner, className, e
       shortcuts.start()
       EQ.init()
       runnablesStore.setRunningSpec(runnerStore.spec.relative)
+      // we need to know when the test is mounted for our reporter tests. see
+      setIsMounted(true)
     } else {
       // do componentDidUpdate logic
+      // TODO: is this in the right place?
 
       if (!runnerStore.spec) {
         throw Error(`Expected runnerStore.spec not to be null.`)
@@ -110,6 +112,7 @@ const Reporter: React.FC<SingleReporterProps> = observer(({ runner, className, e
   return (
     <div className={cs(className, 'reporter', {
       'studio-active': appState.studioActive,
+      'mounted': isMounted,
     })}>
       {renderReporterHeader({ appState, statsStore, runnablesStore })}
       {appState?.isPreferencesMenuOpen ? (