fix: Hovering over mount in command log does not show component in AUT (#24346)

Co-authored-by: Mark Noonan <mark@cypress.io>
Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>
Co-authored-by: Zachary Williams <zachjw34@gmail.com>

Author: 4 people

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',
+            }
+          },
+        })
+      })
     )
   // 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/svelte/src/mount.ts

@@ -82,7 +82,7 @@ export function mount<T extends SvelteComponent> (
         Cypress.log({
           name: 'mount',
           message: [mountMessage],
-        }).snapshot('mounted').end()
+        })
       }
     })
     .wrap({ component: componentInstance as T }, { log: false })

npm/vue/src/index.ts

@@ -325,21 +325,8 @@ export function mount<
 
 // implementation
 export function mount (componentOptions: any, options: any = {}) {
-  // TODO: get the real displayName and props from VTU shallowMount
-  const componentName = getComponentDisplayName(componentOptions)
-
-  const message = `<${componentName} ... />`
-  let logInstance: Cypress.Log
-
-  // then wait for cypress to load
+  // wait for cypress to load
   return cy.then(() => {
-    if (options.log !== false) {
-      logInstance = Cypress.log({
-        name: 'mount',
-        message: [message],
-      })
-    }
-
     // @ts-ignore
     const document: Document = cy.state('document')
 
@@ -370,9 +357,14 @@ export function mount (componentOptions: any, options: any = {}) {
     .wrap(wrapper, { log: false })
     .wait(1, { log: false })
     .then(() => {
-      if (logInstance) {
-        logInstance.snapshot('mounted')
-        logInstance.end()
+      if (options.log !== false) {
+        // TODO: get the real displayName and props from VTU shallowMount
+        const message = `<${getComponentDisplayName(componentOptions)} ... />`
+
+        Cypress.log({
+          name: 'mount',
+          message: [message],
+        })
       }
 
       // by returning undefined we keep the previous subject

npm/vue2/src/index.ts

@@ -362,13 +362,6 @@ export const mount = (
     })
   })
   .then((win) => {
-    if (optionsOrProps.log !== false) {
-      Cypress.log({
-        name: 'mount',
-        message: [message],
-      }).snapshot('mounted').end()
-    }
-
     const localVue = createLocalVue()
 
     // @ts-ignore
@@ -411,6 +404,16 @@ export const mount = (
     Cypress.vue = VTUWrapper.vm
     Cypress.vueWrapper = VTUWrapper
   })
+  .then(() => {
+    if (optionsOrProps.log !== false) {
+      return Vue.nextTick(() => {
+        Cypress.log({
+          name: 'mount',
+          message: [message],
+        })
+      })
+    }
+  })
 }
 
 /**

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

@@ -0,0 +1,52 @@
+import type { fixtureDirs } from '@tooling/system-tests'
+
+type ProjectDirs = typeof fixtureDirs
+
+const PROJECTS: {projectName: ProjectDirs[number], test: string}[] = [
+  { projectName: 'angular-14', 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' },
+]
+
+// TODO: Add these tests to another cy-in-cy framework test to reduce CI cost as these scaffolding is expensive
+for (const { projectName, test } of PROJECTS) {
+  describe(`CT Mount ${projectName}`, { viewportWidth: 1500, defaultCommandTimeout: 30000 }, () => {
+    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-14') {
+            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)
+            })
+          }
+        })
+      }
+    })
+  })
+}