fix(component-testing): ensure to call unmount after each test (#15385)

* fix: ensure to call unmount after each test

* fix: do not append beforeEach

* fix: add hook

* chore: move unmount hook into npm/react

* chore: resolve conflicts

* chore: fix tests

Co-authored-by: Barthélémy Ledoux <bart@cypress.io>

Author: lmiller1990

npm/react/cypress/component/viewport-spec.jsx

@@ -31,7 +31,7 @@ describe('cy.viewport', () => {
       minima libero vel? Nam sequi iusto quod fugit vel rerum eligendi beatae voluptatibus numquam.
     </p>)
 
-    expect(getComputedStyle(window.parent.document.querySelector('iframe').parentElement).transform).to.contain('matrix(1')
+    expect(getComputedStyle(window.parent.document.querySelector('iframe').parentElement).transform).to.contain('matrix(0.8')
     cy.viewport(2000, 200).should(() => {
       expect(getComputedStyle(window.parent.document.querySelector('iframe').parentElement).transform).not.to.contain('matrix(1')
     })

npm/react/src/mount.ts

@@ -166,6 +166,10 @@ export const unmount = (options = { log: true }) => {
   })
 }
 
+beforeEach(() => {
+  unmount()
+})
+
 /**
  * Creates new instance of `mount` function with default options
  * @function   createMount

npm/vite-dev-server/cypress/components/react-no-jsx.spec.tsx

@@ -3,7 +3,22 @@ import { mount } from '@cypress/react'
 import { Foo } from './Foo'
 
 describe('React', () => {
-  it('renders a react component', () => {
+  it('renders a react component #1', () => {
+    mount(<Foo />)
+    cy.get('div').contains('Hello world')
+  })
+
+  it('renders a react component #2', () => {
+    mount(<Foo />)
+    cy.get('div').contains('Hello world')
+  })
+
+  it('renders a react component #3', () => {
+    mount(<Foo />)
+    cy.get('div').contains('Hello world')
+  })
+
+  it('renders a react component #4', () => {
     mount(<Foo />)
     cy.get('div').contains('Hello world')
   })

npm/vite-dev-server/index-template.html

@@ -58,7 +58,7 @@
       Cypress.onSpecWindow(window, importsToLoad)
       Cypress.action('app:window:before:load', window)
 
-      beforeEach(() => {
+      before(() => {
         const root = appendTargetIfNotExists('__cy_root')
 
         root.appendChild(appendTargetIfNotExists('__cy_app'))

packages/runner-ct/src/app/RunnerCt.tsx

@@ -52,15 +52,13 @@ export const AUT_IFRAME_MARGIN = {
 
 const App: React.FC<AppProps> = observer(
   function App (props: AppProps) {
-    const searchRef = React.createRef<HTMLInputElement>(null)
+    const searchRef = React.useRef<HTMLInputElement>(null)
     const splitPaneRef = React.useRef<{ splitPane: HTMLDivElement }>(null)
     const pluginRootContainer = React.useRef<null | HTMLDivElement>(null)
 
     const { state, eventManager, config } = props
     const isOpenMode = !config.isTextTerminal
 
-    const [isResizing, setIsResizing] = React.useState(false)
-
     const [isSpecsListOpen, setIsSpecsListOpen] = React.useState(isOpenMode)
 
     // const windowSize = useWindowSize()