Add test checking that repeated edits won't cause hydration issues (#…

…44189)

test/development/repeated-dev-edits/pages/index.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p id="version-1">version-1</p>
+}

test/development/repeated-dev-edits/repeated-dev-edits.test.ts

@@ -0,0 +1,48 @@
+import { createNextDescribe } from 'e2e-utils'
+import fs from 'fs-extra'
+import { hasRedbox } from 'next-test-utils'
+import path from 'path'
+
+createNextDescribe(
+  'repeated-dev-edits',
+  {
+    files: __dirname,
+  },
+  ({ next }) => {
+    // Recommended for tests that check HTML. Cheerio is a HTML parser that has a jQuery like API.
+    it('should not break the hydration ', async () => {
+      const browser = await next.browser('/')
+      expect(await browser.elementByCss('p').text()).toBe('version-1')
+
+      const pagePath = 'pages/index.tsx'
+      const pageContent = String(
+        await fs.readFile(path.join(__dirname, pagePath))
+      )
+
+      await next.patchFile(
+        pagePath,
+        pageContent.replaceAll('version-1', 'version-2')
+      )
+      browser.waitForElementByCss('#version-2')
+      expect(await browser.elementByCss('p').text()).toBe('version-2')
+
+      // Verify no hydration mismatch:
+      expect(await hasRedbox(browser)).toBeFalse()
+
+      await next.patchFile(
+        pagePath,
+        pageContent.replaceAll('version-1', 'version-3')
+      )
+      browser.waitForElementByCss('#version-3')
+      expect(await browser.elementByCss('p').text()).toBe('version-3')
+
+      // Verify no hydration mismatch:
+      expect(await hasRedbox(browser)).toBeFalse()
+
+      browser.refresh()
+
+      // Verify no hydration mismatch:
+      expect(await hasRedbox(browser)).toBeFalse()
+    })
+  }
+)