fix: cypress/react18 rerender (#23360)

Co-authored-by: astone123 <adams@cypress.io>
cypress-io · Sep 2, 2022 · 8b8f20e · 8b8f20e · cypress-bot · Sep 2, 2022
1 parent 8e4ebef
commit 8b8f20e
Show file tree

Hide file tree

Showing 10 changed files with 523 additions and 94 deletions.
diff --git a/npm/react18/src/index.ts b/npm/react18/src/index.ts
@@ -11,12 +11,14 @@ import type {
   UnmountArgs,
 } from '@cypress/react'
 
-let root: any
+let root: ReactDOM.Root | null
 
 const cleanup = () => {
   if (root) {
     root.unmount()
 
+    root = null
+
     return true
   }
 
@@ -27,7 +29,9 @@ export function mount (jsx: React.ReactNode, options: MountOptions = {}, rerende
   const internalOptions: InternalMountOptions = {
     reactDom: ReactDOM,
     render: (reactComponent: ReturnType<typeof React.createElement>, el: HTMLElement) => {
-      root = ReactDOM.createRoot(el)
+      if (!root) {
+        root = ReactDOM.createRoot(el)
+      }
 
       return root.render(reactComponent)
     },

diff --git a/system-tests/__snapshots__/component_testing_spec.ts.js b/system-tests/__snapshots__/component_testing_spec.ts.js
diff --git a/system-tests/__snapshots__/vite_dev_server_fresh_spec.ts.js b/system-tests/__snapshots__/vite_dev_server_fresh_spec.ts.js
diff --git a/system-tests/__snapshots__/webpack_dev_server_fresh_spec.ts.js b/system-tests/__snapshots__/webpack_dev_server_fresh_spec.ts.js
diff --git a/system-tests/project-fixtures/react/src/Rerendering.cy.jsx b/system-tests/project-fixtures/react/src/Rerendering.cy.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+function StatefulComponent ({ foo }) {
+  const [bar, setBar] = React.useState(0);
+  return (
+    <button
+      onClick={() => {
+        setBar(bar + 1);
+      }}
+    >
+      {foo} {bar}
+    </button>
+  );
+};
+
+describe('re-render', () => {
+  it('maintains component state across re-renders', () => {
+    cy.mount(<StatefulComponent foo="baz" />).then(({ rerender }) => {
+      cy.get('button').should('have.text', 'baz 0');
+      cy.get('button').click().should('have.text', 'baz 1');
+      rerender(<StatefulComponent foo="baz" />)
+
+      // The button should still show 1 after re-render
+      cy.get('button').should('have.text', 'baz 1');
+    });
+  });
+});
diff --git a/system-tests/project-fixtures/react/vite.config.js b/system-tests/project-fixtures/react/vite.config.js
@@ -1,5 +1,11 @@
 const {defineConfig} = require('vite')
 
 module.exports = defineConfig({
+  resolve: {
+    alias: {
+      'react': require.resolve('react'),
+      'react-dom': require.resolve('react-dom'),
+    },
+  },
   logLevel: 'silent'
 })
diff --git a/system-tests/projects/react17/package.json b/system-tests/projects/react17/package.json
@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "react": "17.0.2",
-    "react-dom": " 17.0.2"
+    "react-dom": "17.0.2"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^1.3.2",

diff --git a/system-tests/projects/react17/yarn.lock b/system-tests/projects/react17/yarn.lock
@@ -2345,7 +2345,7 @@ randomfill@^1.0.3:
     randombytes "^2.0.5"
     safe-buffer "^5.1.0"
 
-"react-dom@ 17.0.2":
+react-dom@17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
   integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==

diff --git a/system-tests/test/component_testing_spec.ts b/system-tests/test/component_testing_spec.ts
@@ -79,7 +79,7 @@ describe(`React major versions with Vite`, function () {
       return systemTests.exec(this, {
         project: `react${majorVersion}`,
         configFile: 'cypress-vite.config.ts',
-        spec: 'src/App.cy.jsx,src/Unmount.cy.jsx,src/UsingLegacyMount.cy.jsx',
+        spec: 'src/App.cy.jsx,src/Unmount.cy.jsx,src/UsingLegacyMount.cy.jsx,src/Rerendering.cy.jsx',
         testingType: 'component',
         browser: 'chrome',
         snapshot: true,
@@ -97,7 +97,7 @@ describe(`React major versions with Webpack`, function () {
       return systemTests.exec(this, {
         project: `react${majorVersion}`,
         configFile: 'cypress-webpack.config.ts',
-        spec: 'src/App.cy.jsx,src/Unmount.cy.jsx,src/UsingLegacyMount.cy.jsx',
+        spec: 'src/App.cy.jsx,src/Unmount.cy.jsx,src/UsingLegacyMount.cy.jsx,src/Rerendering.cy.jsx',
         testingType: 'component',
         browser: 'chrome',
         snapshot: true,

diff --git a/system-tests/test/vite_dev_server_fresh_spec.ts b/system-tests/test/vite_dev_server_fresh_spec.ts
@@ -18,6 +18,9 @@ describe('@cypress/vite-dev-server', function () {
           browser: 'chrome',
           snapshot: true,
           expectedExitCode: 3,
+          onStdout: (stdout) => {
+            return stdout.replace(/http:\/\/localhost:\d+/g, 'http://localhost:xxxx')
+          },
         })
       })
     }