From 53e3b810cfbc72c649b36f430be60b38b9473a97 Mon Sep 17 00:00:00 2001
From: Zack Tanner <zacktanner@gmail.com>
Date: Wed, 26 Jul 2023 11:30:53 -0700
Subject: [PATCH] add hydration error test when using `useId()` in a client
 component

---
 .../acceptance-app/hydration-error.test.ts    | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/test/development/acceptance-app/hydration-error.test.ts b/test/development/acceptance-app/hydration-error.test.ts
index 213c8e1e667ee..ea40ef58e0ff4 100644
--- a/test/development/acceptance-app/hydration-error.test.ts
+++ b/test/development/acceptance-app/hydration-error.test.ts
@@ -221,4 +221,41 @@ describe('Error overlay for hydration errors', () => {
 
     await cleanup()
   })
+
+  it('should not show a hydration error when using `useId` in a client component', async () => {
+    const { cleanup, browser } = await sandbox(
+      next,
+      new Map([
+        [
+          'app/page.js',
+          outdent`
+            'use client'
+
+            import { useId } from "react"
+
+            export default function Page() {
+              let id = useId();
+              return (
+                <div className="parent" data-id={id}>
+                  Hello World
+                </div>
+              );
+            }
+          `,
+        ],
+      ])
+    )
+
+    const logs = await browser.log()
+    const errors = logs
+      .filter((x) => x.source === 'error')
+      .map((x) => x.message)
+      .join('\n')
+
+    expect(errors).not.toInclude(
+      'Warning: Prop `%s` did not match. Server: %s Client: %s'
+    )
+
+    await cleanup()
+  })
 })