misc: remove component testing API stubs that were removed in Cypress…

… 11 (#30696)

cli/CHANGELOG.md

@@ -51,6 +51,10 @@ in this [GitHub issue](https://github.com/cypress-io/cypress/issues/30447). Addr
 - Fixed a visibility issue for elements with `textContent` but without a width or height. Fixed in [#29688](https://github.com/cypress-io/cypress/pull/29688). Fixes [#29687](https://github.com/cypress-io/cypress/issues/29687).
 - Elements whose parent elements has `overflow: clip` and no height/width will now correctly show as hidden. Fixed in [#29778](https://github.com/cypress-io/cypress/pull/29778). Fixes [#23852](https://github.com/cypress-io/cypress/issues/23852).
 
+**Misc:**
+
+ - Removed some component testing API stubs that were removed in [Cypress v11.0.0](https://docs.cypress.io/app/references/migration-guide#Component-Testing-Updates). Addressed in [#30696](https://github.com/cypress-io/cypress/pull/30696). Addresses [#30623](https://github.com/cypress-io/cypress/issues/30623).
+
 **Dependency Updates:**
 
 - Upgraded `electron` from `27.3.10` to `32.2.0`. Addresses [#29547](https://github.com/cypress-io/cypress/issues/29547).

npm/mount-utils/src/index.ts

@@ -15,14 +15,6 @@ export const getContainerEl = (): HTMLElement => {
   throw Error(`No element found that matches selector ${ROOT_SELECTOR}. Please add a root element with data-cy-root attribute to your "component-index.html" file so that Cypress can attach your component to the DOM.`)
 }
 
-export function checkForRemovedStyleOptions (mountingOptions: Record<string, any>) {
-  for (const key of ['cssFile', 'cssFiles', 'style', 'styles', 'stylesheet', 'stylesheets'] as const) {
-    if (mountingOptions[key]) {
-      Cypress.utils.throwErrByPath('mount.removed_style_mounting_options', key)
-    }
-  }
-}
-
 /**
  * Utility function to register CT side effects and run cleanup code during the "test:before:run" Cypress hook
  * @param optionalCallback Callback to be called before the next test runs
@@ -61,39 +53,3 @@ export function setupHooks (optionalCallback?: Function) {
     optionalCallback?.()
   })
 }
-
-/**
- * Remove any style or extra link elements from the iframe placeholder
- * left from any previous test
- *
- * Removed as of Cypress 11.0.0
- * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
- */
-export function cleanupStyles () {
-  Cypress.utils.throwErrByPath('mount.cleanup_styles')
-}
-
-/**
- * Additional styles to inject into the document.
- * A component might need 3rd party libraries from CDN,
- * local CSS files and custom styles.
- *
- * Removed as of Cypress 11.0.0.
- * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
- */
-export type StyleOptions = unknown
-
-/**
- * Injects custom style text or CSS file or 3rd party style resources
- * into the given document.
- *
- * Removed as of Cypress 11.0.0.
- * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
- */
-export const injectStylesBeforeElement = (
-  options: Partial<StyleOptions & { log: boolean }>,
-  document: Document,
-  el: HTMLElement | null,
-) => {
-  Cypress.utils.throwErrByPath('mount.inject_styles_before_element')
-}

npm/react/cypress/component/basic/hello-world.cy.jsx

@@ -9,10 +9,4 @@ describe('HelloWorld component', () => {
     mount(<HelloWorld />)
     cy.contains('Hello World!')
   })
-
-  it('errors if passing alias', () => {
-    expect(() => mount(<HelloWorld />, { alias: 'foo' })).to.throw(
-      `passing \`alias\` to mounting options is no longer supported. Use mount(...).as('foo') instead.`,
-    )
-  })
 })

npm/react/cypress/component/basic/unmount/README.md

@@ -1,21 +1,21 @@
 # unmount
 
-If you need to test what the component is doing when it is being unmounted, use `unmount` function.
+If you need to test what the component is doing when it is being unmounted simply `mount` a blank component.
 
 ```js
-import { mount, unmount } from '@cypress/react'
+import { mount } from '@cypress/react'
 it('calls unmount prop', () => {
   // async command
   mount(...)
-  // cy commands
 
-  // now let's unmount (async command)
-  unmount()
+  // cy commands
 
+  // mount a blank component to unmount the previous component
+  mount(<div />)
   // confirm the component has been unmounted
   // and performed everything needed in its
   // componentWillUnmount method
 })
 ```
 
-See [unmount-spec.js](unmount-spec.js) and [comp-spec.js](comp-spec.js)
+See [comp-spec.js](comp-spec.js)

npm/react/cypress/component/basic/unmount/comp.cy.jsx

@@ -1,7 +1,7 @@
 /// <reference types="cypress" />
 import { Comp } from './comp.jsx'
 import React from 'react'
-import { mount, unmount } from '@cypress/react'
+import { mount } from '@cypress/react'
 
 it('calls callbacks on mount and unmount', () => {
   const onMount = cy.stub()
@@ -15,14 +15,10 @@ it('calls callbacks on mount and unmount', () => {
 
   cy.contains('Component with').should('be.visible')
 
-  let stub = cy.stub()
+  // mount something else to trigger unmount
+  mount(<div/>)
 
-  try {
-    unmount()
-  } catch (e) {
-    expect(e.message).to.eq('`unmount` is no longer supported.')
-    stub()
-  }
-
-  expect(stub).to.have.been.calledOnce
+  cy.then(() => {
+    expect(onUnmount).to.have.been.calledOnce
+  })
 })

npm/react/cypress/component/basic/unmount/comp.jsx

@@ -1,8 +1,10 @@
 import React, { useEffect } from 'react'
 
-export const Comp = ({ onMount }) => {
+export const Comp = ({ onMount, onUnmount }) => {
   useEffect(() => {
     onMount()
+
+    return onUnmount
   }, [])
 
   return <div>Component with mount and unmount calls</div>

npm/react/src/createMount.ts

@@ -4,7 +4,6 @@ import {
   getContainerEl,
   ROOT_SELECTOR,
   setupHooks,
-  checkForRemovedStyleOptions,
 } from '@cypress/mount-utils'
 import type { InternalMountOptions, MountOptions, MountReturn, UnmountArgs } from './types'
 
@@ -30,14 +29,6 @@ export const makeMountFn = (
     throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters')
   }
 
-  // @ts-expect-error - this is removed but we want to check if a user is passing it, and error if they are.
-  if (options.alias) {
-    // @ts-expect-error
-    Cypress.utils.throwErrByPath('mount.alias', options.alias)
-  }
-
-  checkForRemovedStyleOptions(options)
-
   mountCleanup = internalMountOptions.cleanup
 
   return cy
@@ -81,10 +72,6 @@ export const makeMountFn = (
         return cy.wrap<MountReturn>({
           component: userComponent,
           rerender: (newComponent) => makeMountFn('rerender', newComponent, options, key, internalMountOptions),
-          unmount: () => {
-            // @ts-expect-error - undocumented API
-            Cypress.utils.throwErrByPath('mount.unmount')
-          },
         }, { log: false })
       })
       // by waiting, we delaying test execution for the next tick of event loop

npm/react/src/index.ts

@@ -2,6 +2,4 @@ export * from './createMount'
 
 export * from './mount'
 
-export * from './mountHook'
-
 export * from './types'

npm/react/src/mount.ts

@@ -8,7 +8,6 @@ import {
 import type {
   MountOptions,
   InternalMountOptions,
-  UnmountArgs,
 } from './index'
 
 let root: ReactDOM.Root | null
@@ -69,16 +68,7 @@ export function mount (jsx: React.ReactNode, options: MountOptions = {}, rerende
 function internalUnmount (options = { log: true }) {
   return makeUnmountFn(options)
 }
-/**
- * Removed as of Cypress 11.0.0.
- * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
- */
-export function unmount (options: UnmountArgs = { log: true }) {
-  // @ts-expect-error - undocumented API
-  Cypress.utils.throwErrByPath('mount.unmount')
-}
 
-// Re-export this to help with migrating away from `unmount`
 export {
   getContainerEl,
 }

npm/react/src/types.ts

@@ -44,11 +44,4 @@ export interface MountReturn {
    * or have asynchronous updates (`useEffect`, `useLayoutEffect`).
    */
   rerender: (component: React.ReactNode) => globalThis.Cypress.Chainable<MountReturn>
-  /**
-   * Removes the mounted component.
-   *
-   * Removed as of Cypress 11.0.0.
-   * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
-   */
-  unmount: (payload: UnmountArgs) => void // globalThis.Cypress.Chainable<JQuery<HTMLElement>>
 }

npm/svelte/src/mount.ts

@@ -1,7 +1,6 @@
 import {
   getContainerEl,
   setupHooks,
-  checkForRemovedStyleOptions,
 } from '@cypress/mount-utils'
 import type { ComponentConstructorOptions, ComponentProps, SvelteComponent } from 'svelte'
 
@@ -61,8 +60,6 @@ export function mount<T extends SvelteComponent> (
   Component: SvelteConstructor<T>,
   options: MountOptions<T> = {},
 ): Cypress.Chainable<MountReturn<T>> {
-  checkForRemovedStyleOptions(options)
-
   return cy.then(() => {
     // Remove last mounted component if cy.mount is called more than once in a test
     cleanup()

npm/vue/src/index.ts

@@ -23,7 +23,6 @@ import type { MountingOptions as VTUMountingOptions, VueWrapper } from '@vue/tes
 import {
   getContainerEl,
   setupHooks,
-  checkForRemovedStyleOptions,
 } from '@cypress/mount-utils'
 
 import * as _VueTestUtils from '@vue/test-utils'
@@ -393,7 +392,6 @@ export function mount<
  * })
  */
 export function mount (componentOptions: any, options: any = {}) {
-  checkForRemovedStyleOptions(options)
   // Remove last mounted component if cy.mount is called more than once in a test
   cleanup()
 
@@ -441,17 +439,7 @@ export function mount (componentOptions: any, options: any = {}) {
         component: wrapper.vm,
       }
 
-      return new Proxy(Object.create(returnVal), {
-        get (obj, prop) {
-        // throw an error if it looks like the caller is trying to call a method on the VueWrapper that was originally returned
-          if (Reflect.get(wrapper, prop)) {
-            // @ts-expect-error - internal API
-            Cypress.utils.throwErrByPath('mount.vue_yielded_value')
-          }
-
-          return Reflect.get(obj, prop)
-        },
-      })
+      return returnVal
     })
   })
 }
@@ -480,25 +468,6 @@ function getComponentDisplayName (componentOptions: any): string {
   return DEFAULT_COMP_NAME
 }
 
-/**
- * Helper function for mounting a component quickly in test hooks.
- * @example
- *  import {mountCallback} from '@cypress/vue'
- *  beforeEach(mountVue(component, options))
- *
- * Removed as of Cypress 11.0.0.
- * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
- */
-export function mountCallback (
-  component: any,
-  options: any = {},
-) {
-  return () => {
-    // @ts-expect-error - undocumented API
-    Cypress.utils.throwErrByPath('mount.mount_callback')
-  }
-}
-
 // Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
 // by creating an explicit function/import that the user can register in their 'component.js' support file,
 // such as: