diff --git a/test/development/repeated-dev-edits/pages/index.tsx b/test/development/repeated-dev-edits/pages/index.tsx new file mode 100644 index 000000000000000..e1c5cb9aec214e3 --- /dev/null +++ b/test/development/repeated-dev-edits/pages/index.tsx @@ -0,0 +1,3 @@ +export default function Page() { + return

version-1

+} diff --git a/test/development/repeated-dev-edits/repeated-dev-edits.test.ts b/test/development/repeated-dev-edits/repeated-dev-edits.test.ts new file mode 100644 index 000000000000000..f96ab7994de9df1 --- /dev/null +++ b/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() + }) + } +)