fix: Hovering over mount in command log does not show component in AUT

npm/react/src/createMount.ts

@@ -90,24 +90,6 @@ export const makeMountFn = (
 
     internalMountOptions.render(reactComponent, el, reactDomToUse)
 
-    if (options.log !== false) {
-      Cypress.log({
-        name: type,
-        type: 'parent',
-        message: [message],
-        // @ts-ignore
-        $el: (el.children.item(0) as unknown) as JQuery<HTMLElement>,
-        consoleProps: () => {
-          return {
-            // @ts-ignore protect the use of jsx functional components use ReactNode
-            props: jsx.props,
-            description: type === 'mount' ? 'Mounts React component' : 'Rerenders mounted React component',
-            home: 'https://github.com/cypress-io/cypress',
-          }
-        },
-      }).snapshot('mounted').end()
-    }
-
     return (
       // Separate alias and returned value. Alias returns the component only, and the thenable returns the additional functions
       cy.wrap<React.ReactNode>(userComponent, { log: false })
@@ -123,6 +105,23 @@ export const makeMountFn = (
       // and letting hooks and component lifecycle methods to execute mount
       // https://github.com/bahmutov/cypress-react-unit-test/issues/200
       .wait(0, { log: false })
+      .then(() => {
+        Cypress.log({
+          name: type,
+          type: 'parent',
+          message: [message],
+          // @ts-ignore
+          $el: (el.children.item(0) as unknown) as JQuery<HTMLElement>,
+          consoleProps: () => {
+            return {
+              // @ts-ignore protect the use of jsx functional components use ReactNode
+              props: jsx.props,
+              description: type === 'mount' ? 'Mounts React component' : 'Rerenders mounted React component',
+              home: 'https://github.com/cypress-io/cypress',
+            }
+          },
+        }).snapshot('mounted').end()
+      })
     )
   // Bluebird types are terrible. I don't think the return type can be carried without this cast
   }) as unknown as globalThis.Cypress.Chainable<MountReturn>

npm/vue2/src/index.ts

@@ -363,10 +363,12 @@ export const mount = (
   })
   .then((win) => {
     if (optionsOrProps.log !== false) {
-      Cypress.log({
-        name: 'mount',
-        message: [message],
-      }).snapshot('mounted').end()
+      Vue.nextTick(() => {
+        Cypress.log({
+          name: 'mount',
+          message: [message],
+        }).snapshot('mounted').end()
+      })
     }
 
     const localVue = createLocalVue()
@@ -410,7 +412,7 @@ export const mount = (
 
     Cypress.vue = VTUWrapper.vm
     Cypress.vueWrapper = VTUWrapper
-  })
+  }).wait(0, { log: false })
 }
 
 /**

packages/app/cypress/e2e/runner/reporter-ct-mount-hover.cy.ts

@@ -0,0 +1,51 @@
+import type { fixtureDirs } from '@tooling/system-tests'
+
+type ProjectDirs = typeof fixtureDirs
+
+const PROJECTS: {projectName: ProjectDirs[number], test: string}[] = [
+  { projectName: 'angular-15', test: 'app.component' },
+  { projectName: 'vueclivue2-configured', test: 'HelloWorld.cy' },
+  { projectName: 'react-vite-ts-configured', test: 'App.cy' },
+  { projectName: 'react18', test: 'App.cy' },
+  { projectName: 'create-react-app-configured', test: 'App.cy' },
+  { projectName: 'vueclivue3-configured', test: 'HelloWorld.cy' },
+  { projectName: 'nuxtjs-vue2-configured', test: 'Tutorial.cy' },
+]
+
+for (const { projectName, test } of PROJECTS) {
+  describe(`CT Mount ${projectName}`, { viewportWidth: 1500, defaultCommandTimeout: 10000 }, () => {
+    beforeEach(() => {
+      cy.scaffoldProject(projectName)
+      cy.findBrowsers()
+    }),
+    it(`While hovering on Mount(), shows component on AUT for ${projectName}`, () => {
+      if (`${projectName}` === 'react18') {
+        cy.openProject(projectName, ['--config-file', 'cypress-vite.config.ts'])
+        cy.startAppServer('component')
+        cy.visitApp()
+        cy.contains(`${test}`).click()
+        cy.waitForSpecToFinish()
+        cy.get('.collapsible-header-inner:first').click().get('.command.command-name-mount > .command-wrapper').click().then(() => {
+          cy.get('iframe.aut-iframe').its('0.contentDocument.body').then(cy.wrap).within(() => {
+            cy.get('[data-cy-root]').children().should('have.length.at.least', 1)
+          })
+        })
+      } else {
+        cy.openProject(projectName)
+        cy.startAppServer('component')
+        cy.visitApp()
+        cy.contains(`${test}`).click()
+        cy.waitForSpecToFinish()
+        cy.get('.command.command-name-mount > .command-wrapper').click().then(() => {
+          if (`${projectName}` === 'angular-15') {
+            cy.get('iframe.aut-iframe').its('0.contentDocument.body').children().should('have.length.at.least', 2)
+          } else {
+            cy.get('iframe.aut-iframe').its('0.contentDocument.body').then(cy.wrap).within(() => {
+              cy.get('[data-cy-root]').children().should('have.length.at.least', 1)
+            })
+          }
+        })
+      }
+    })
+  })
+}