Simplify internal tests (#3720)

This PR simplifies the internal tests a bit.

1. Don't explicitly test if a component has a specific ID
1. Don't mock the `useId` hook if it's not necessary

What we care about more is that 2 components (E.g.: `MenuButton` and
`MenuItems`) are connected to each other. This is done via `id` and
`aria-controls` attributes. The exact ID is not important.

The main motivation for this is that every time we introduce some
`useId()` hook call somewhere, the IDs will shift and it will look like
some tests are broken.

If we are not explicitly testing the IDs, we also don't really care
about deterministic incrementing IDs in tests, so therefore we can
remove some `useId` mocking.

Note: some tests still have mocks like this (e.g.: `description.test.ts`
& `label.test.ts`) but that's because they have some snapshot tests.

packages/@headlessui-react/src/components/dialog/dialog.test.tsx

@@ -21,8 +21,6 @@ import { Popover } from '../popover/popover'
 import { Transition } from '../transition/transition'
 import { Dialog } from './dialog'
 
-jest.mock('../../hooks/use-id')
-
 afterAll(() => jest.restoreAllMocks())
 
 function nextFrame() {
@@ -65,10 +63,7 @@ describe('Safe guards', () => {
         </Dialog>
       )
 
-      assertDialog({
-        state: DialogState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-dialog-1' },
-      })
+      assertDialog({ state: DialogState.InvisibleUnmounted })
     })
   )
 })
@@ -584,10 +579,7 @@ describe('Rendering', () => {
 
         await nextFrame()
 
-        assertDialog({
-          state: DialogState.Visible,
-          attributes: { id: 'headlessui-dialog-1' },
-        })
+        assertDialog({ state: DialogState.Visible })
         assertDialogTitle({
           state: DialogState.Visible,
           textContent: JSON.stringify({ open: true }),
@@ -609,10 +601,7 @@ describe('Rendering', () => {
 
         await nextFrame()
 
-        assertDialog({
-          state: DialogState.Visible,
-          attributes: { id: 'headlessui-dialog-1' },
-        })
+        assertDialog({ state: DialogState.Visible })
         assertDialogDescription({
           state: DialogState.Visible,
           textContent: JSON.stringify({ open: true, disabled: false }),
@@ -754,10 +743,7 @@ describe('Keyboard interactions', () => {
         await click(document.getElementById('trigger'))
 
         // Verify it is open
-        assertDialog({
-          state: DialogState.Visible,
-          attributes: { id: 'headlessui-dialog-1' },
-        })
+        assertDialog({ state: DialogState.Visible })
 
         // Close dialog
         await press(Keys.Escape)
@@ -793,10 +779,7 @@ describe('Keyboard interactions', () => {
         await click(document.getElementById('trigger'))
 
         // Verify it is open
-        assertDialog({
-          state: DialogState.Visible,
-          attributes: { id: 'headlessui-dialog-1' },
-        })
+        assertDialog({ state: DialogState.Visible })
 
         // Close dialog
         await press(Keys.Escape)
@@ -838,10 +821,7 @@ describe('Keyboard interactions', () => {
         await click(document.getElementById('trigger'))
 
         // Verify it is open
-        assertDialog({
-          state: DialogState.Visible,
-          attributes: { id: 'headlessui-dialog-1' },
-        })
+        assertDialog({ state: DialogState.Visible })
 
         // Try to close the dialog
         await press(Keys.Escape)
@@ -885,10 +865,7 @@ describe('Keyboard interactions', () => {
         await click(document.getElementById('trigger'))
 
         // Verify it is open
-        assertDialog({
-          state: DialogState.Visible,
-          attributes: { id: 'headlessui-dialog-1' },
-        })
+        assertDialog({ state: DialogState.Visible })
 
         // Verify that the input field is focused
         assertActiveElement(document.getElementById('b'))
@@ -935,10 +912,7 @@ describe('Keyboard interactions', () => {
         await click(document.getElementById('trigger'))
 
         // Verify it is open
-        assertDialog({
-          state: DialogState.Visible,
-          attributes: { id: 'headlessui-dialog-1' },
-        })
+        assertDialog({ state: DialogState.Visible })
 
         // Verify that the input field is focused
         assertActiveElement(document.getElementById('a'))
@@ -985,10 +959,7 @@ describe('Keyboard interactions', () => {
         await click(document.getElementById('trigger'))
 
         // Verify it is open
-        assertDialog({
-          state: DialogState.Visible,
-          attributes: { id: 'headlessui-dialog-1' },
-        })
+        assertDialog({ state: DialogState.Visible })
 
         // Verify that the input field is focused
         assertActiveElement(document.getElementById('a'))

packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx

@@ -14,8 +14,6 @@ import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import { Transition } from '../transition/transition'
 import { Disclosure, DisclosureButton, DisclosurePanel } from './disclosure'
 
-jest.mock('../../hooks/use-id')
-
 afterAll(() => jest.restoreAllMocks())
 
 function nextFrame() {
@@ -51,10 +49,7 @@ describe('Safe guards', () => {
         </Disclosure>
       )
 
-      assertDisclosureButton({
-        state: DisclosureState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-disclosure-button-1' },
-      })
+      assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
       assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
     })
   )
@@ -76,18 +71,12 @@ describe('Rendering', () => {
           </Disclosure>
         )
 
-        assertDisclosureButton({
-          state: DisclosureState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-disclosure-button-1' },
-        })
+        assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
         assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
         await click(getDisclosureButton())
 
-        assertDisclosureButton({
-          state: DisclosureState.Visible,
-          attributes: { id: 'headlessui-disclosure-button-1' },
-        })
+        assertDisclosureButton({ state: DisclosureState.Visible })
         assertDisclosurePanel({ state: DisclosureState.Visible, textContent: 'Panel is: open' })
       })
     )
@@ -104,10 +93,7 @@ describe('Rendering', () => {
         </Disclosure>
       )
 
-      assertDisclosureButton({
-        state: DisclosureState.Visible,
-        attributes: { id: 'headlessui-disclosure-button-1' },
-      })
+      assertDisclosureButton({ state: DisclosureState.Visible })
       assertDisclosurePanel({ state: DisclosureState.Visible, textContent: 'Panel is: open' })
 
       await click(getDisclosureButton())
@@ -263,7 +249,6 @@ describe('Rendering', () => {
 
         assertDisclosureButton({
           state: DisclosureState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-disclosure-button-1' },
           textContent: JSON.stringify({
             open: false,
             hover: false,
@@ -279,7 +264,6 @@ describe('Rendering', () => {
 
         assertDisclosureButton({
           state: DisclosureState.Visible,
-          attributes: { id: 'headlessui-disclosure-button-1' },
           textContent: JSON.stringify({
             open: true,
             hover: false,
@@ -307,7 +291,6 @@ describe('Rendering', () => {
 
         assertDisclosureButton({
           state: DisclosureState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-disclosure-button-1' },
           textContent: JSON.stringify({
             open: false,
             hover: false,
@@ -323,7 +306,6 @@ describe('Rendering', () => {
 
         assertDisclosureButton({
           state: DisclosureState.Visible,
-          attributes: { id: 'headlessui-disclosure-button-1' },
           textContent: JSON.stringify({
             open: true,
             hover: false,
@@ -474,18 +456,12 @@ describe('Rendering', () => {
           </Disclosure>
         )
 
-        assertDisclosureButton({
-          state: DisclosureState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-disclosure-button-1' },
-        })
+        assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
         assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
         await click(getDisclosureButton())
 
-        assertDisclosureButton({
-          state: DisclosureState.Visible,
-          attributes: { id: 'headlessui-disclosure-button-1' },
-        })
+        assertDisclosureButton({ state: DisclosureState.Visible })
         assertDisclosurePanel({
           state: DisclosureState.Visible,
           textContent: JSON.stringify({ open: true }),
@@ -710,10 +686,7 @@ describe('Keyboard interactions', () => {
           </Disclosure>
         )
 
-        assertDisclosureButton({
-          state: DisclosureState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-disclosure-button-1' },
-        })
+        assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
         assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
         // Focus the button
@@ -724,10 +697,7 @@ describe('Keyboard interactions', () => {
 
         // Verify it is open
         assertDisclosureButton({ state: DisclosureState.Visible })
-        assertDisclosurePanel({
-          state: DisclosureState.Visible,
-          attributes: { id: 'headlessui-disclosure-panel-2' },
-        })
+        assertDisclosurePanel({ state: DisclosureState.Visible })
 
         // Close disclosure
         await press(Keys.Enter)
@@ -745,10 +715,7 @@ describe('Keyboard interactions', () => {
           </Disclosure>
         )
 
-        assertDisclosureButton({
-          state: DisclosureState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-disclosure-button-1' },
-        })
+        assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
         assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
         // Focus the button
@@ -758,10 +725,7 @@ describe('Keyboard interactions', () => {
         await press(Keys.Enter)
 
         // Verify it is still closed
-        assertDisclosureButton({
-          state: DisclosureState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-disclosure-button-1' },
-        })
+        assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
         assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
       })
     )
@@ -776,10 +740,7 @@ describe('Keyboard interactions', () => {
           </Disclosure>
         )
 
-        assertDisclosureButton({
-          state: DisclosureState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-disclosure-button-1' },
-        })
+        assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
         assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
         // Focus the button
@@ -790,10 +751,7 @@ describe('Keyboard interactions', () => {
 
         // Verify it is open
         assertDisclosureButton({ state: DisclosureState.Visible })
-        assertDisclosurePanel({
-          state: DisclosureState.Visible,
-          attributes: { id: 'headlessui-disclosure-panel-2' },
-        })
+        assertDisclosurePanel({ state: DisclosureState.Visible })
 
         // Close disclosure
         await press(Keys.Enter)
@@ -816,10 +774,7 @@ describe('Keyboard interactions', () => {
           </Disclosure>
         )
 
-        assertDisclosureButton({
-          state: DisclosureState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-disclosure-button-1' },
-        })
+        assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
         assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
         // Focus the button
@@ -830,10 +785,7 @@ describe('Keyboard interactions', () => {
 
         // Verify it is open
         assertDisclosureButton({ state: DisclosureState.Visible })
-        assertDisclosurePanel({
-          state: DisclosureState.Visible,
-          attributes: { id: 'headlessui-disclosure-panel-2' },
-        })
+        assertDisclosurePanel({ state: DisclosureState.Visible })
       })
     )
 
@@ -847,10 +799,7 @@ describe('Keyboard interactions', () => {
           </Disclosure>
         )
 
-        assertDisclosureButton({
-          state: DisclosureState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-disclosure-button-1' },
-        })
+        assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
         assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
         // Focus the button
@@ -860,10 +809,7 @@ describe('Keyboard interactions', () => {
         await press(Keys.Space)
 
         // Verify it is still closed
-        assertDisclosureButton({
-          state: DisclosureState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-disclosure-button-1' },
-        })
+        assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
         assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
       })
     )
@@ -878,10 +824,7 @@ describe('Keyboard interactions', () => {
           </Disclosure>
         )
 
-        assertDisclosureButton({
-          state: DisclosureState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-disclosure-button-1' },
-        })
+        assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
         assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
         // Focus the button
@@ -892,10 +835,7 @@ describe('Keyboard interactions', () => {
 
         // Verify it is open
         assertDisclosureButton({ state: DisclosureState.Visible })
-        assertDisclosurePanel({
-          state: DisclosureState.Visible,
-          attributes: { id: 'headlessui-disclosure-panel-2' },
-        })
+        assertDisclosurePanel({ state: DisclosureState.Visible })
 
         // Close disclosure
         await press(Keys.Space)
@@ -919,10 +859,7 @@ describe('Mouse interactions', () => {
         </Disclosure>
       )
 
-      assertDisclosureButton({
-        state: DisclosureState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-disclosure-button-1' },
-      })
+      assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
       assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
       // Open disclosure
@@ -930,10 +867,7 @@ describe('Mouse interactions', () => {
 
       // Verify it is open
       assertDisclosureButton({ state: DisclosureState.Visible })
-      assertDisclosurePanel({
-        state: DisclosureState.Visible,
-        attributes: { id: 'headlessui-disclosure-panel-2' },
-      })
+      assertDisclosurePanel({ state: DisclosureState.Visible })
     })
   )
 
@@ -947,20 +881,14 @@ describe('Mouse interactions', () => {
         </Disclosure>
       )
 
-      assertDisclosureButton({
-        state: DisclosureState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-disclosure-button-1' },
-      })
+      assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
       assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
       // Open disclosure
       await click(getDisclosureButton(), MouseButton.Right)
 
       // Verify it is still closed
-      assertDisclosureButton({
-        state: DisclosureState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-disclosure-button-1' },
-      })
+      assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
       assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
     })
   )
@@ -975,20 +903,14 @@ describe('Mouse interactions', () => {
         </Disclosure>
       )
 
-      assertDisclosureButton({
-        state: DisclosureState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-disclosure-button-1' },
-      })
+      assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
       assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
       // Try to open the disclosure
       await click(getDisclosureButton())
 
       // Verify it is still closed
-      assertDisclosureButton({
-        state: DisclosureState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-disclosure-button-1' },
-      })
+      assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
       assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
     })
   )

packages/@headlessui-react/src/components/listbox/listbox.test.tsx

@@ -37,8 +37,6 @@ import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import { Transition } from '../transition/transition'
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from './listbox'
 
-jest.mock('../../hooks/use-id')
-
 beforeAll(() => {
   jest.spyOn(window, 'requestAnimationFrame').mockImplementation(setImmediate as any)
   jest.spyOn(window, 'cancelAnimationFrame').mockImplementation(clearImmediate as any)
@@ -83,10 +81,7 @@ describe('safeguards', () => {
         </Listbox>
       )
 
-      assertListboxButton({
-        state: ListboxState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-listbox-button-1' },
-      })
+      assertListboxButton({ state: ListboxState.InvisibleUnmounted })
       assertListbox({ state: ListboxState.InvisibleUnmounted })
     })
   )
@@ -114,18 +109,12 @@ describe('Rendering', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         await click(getListboxButton())
 
-        assertListboxButton({
-          state: ListboxState.Visible,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.Visible })
         assertListbox({ state: ListboxState.Visible })
       })
     )
@@ -144,26 +133,17 @@ describe('Rendering', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         await click(getListboxButton())
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         await press(Keys.Enter, getListboxButton())
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
       })
     )
@@ -521,22 +501,13 @@ describe('Rendering', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-2' },
-        })
-        assertListboxLabel({
-          attributes: { id: 'headlessui-label-1' },
-          textContent: JSON.stringify({ open: false, disabled: false }),
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
+        assertListboxLabel({ textContent: JSON.stringify({ open: false, disabled: false }) })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         await click(getListboxButton())
 
-        assertListboxLabel({
-          attributes: { id: 'headlessui-label-1' },
-          textContent: JSON.stringify({ open: true, disabled: false }),
-        })
+        assertListboxLabel({ textContent: JSON.stringify({ open: true, disabled: false }) })
         assertListbox({ state: ListboxState.Visible })
         assertListboxButtonLinkedWithListboxLabel()
       })
@@ -558,7 +529,6 @@ describe('Rendering', () => {
         )
 
         assertListboxLabel({
-          attributes: { id: 'headlessui-label-1' },
           textContent: JSON.stringify({ open: false, disabled: false }),
           tag: 'p',
         })
@@ -566,7 +536,6 @@ describe('Rendering', () => {
 
         await click(getListboxButton())
         assertListboxLabel({
-          attributes: { id: 'headlessui-label-1' },
           textContent: JSON.stringify({ open: true, disabled: false }),
           tag: 'p',
         })
@@ -592,7 +561,6 @@ describe('Rendering', () => {
 
         assertListboxButton({
           state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
           textContent: JSON.stringify({
             open: false,
             active: false,
@@ -609,7 +577,6 @@ describe('Rendering', () => {
 
         assertListboxButton({
           state: ListboxState.Visible,
-          attributes: { id: 'headlessui-listbox-button-1' },
           textContent: JSON.stringify({
             open: true,
             active: true,
@@ -642,7 +609,6 @@ describe('Rendering', () => {
 
         assertListboxButton({
           state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
           textContent: JSON.stringify({
             open: false,
             active: false,
@@ -659,7 +625,6 @@ describe('Rendering', () => {
 
         assertListboxButton({
           state: ListboxState.Visible,
-          attributes: { id: 'headlessui-listbox-button-1' },
           textContent: JSON.stringify({
             open: true,
             active: true,
@@ -692,10 +657,7 @@ describe('Rendering', () => {
         // TODO: Needed to make it similar to vue test implementation?
         // await new Promise(requestAnimationFrame)
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-2' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
         assertListboxButtonLinkedWithListboxLabel()
       })
@@ -805,22 +767,13 @@ describe('Rendering', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         await click(getListboxButton())
 
-        assertListboxButton({
-          state: ListboxState.Visible,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
-        assertListbox({
-          state: ListboxState.Visible,
-          textContent: JSON.stringify({ open: true }),
-        })
+        assertListboxButton({ state: ListboxState.Visible })
+        assertListbox({ state: ListboxState.Visible, textContent: JSON.stringify({ open: true }) })
         assertActiveElement(getListbox())
       })
     )
@@ -875,18 +828,12 @@ describe('Rendering', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         await click(getListboxButton())
 
-        assertListboxButton({
-          state: ListboxState.Visible,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.Visible })
         assertListbox({
           state: ListboxState.Visible,
           textContent: JSON.stringify({
@@ -1309,10 +1256,7 @@ describe('Rendering composition', () => {
         </Listbox>
       )
 
-      assertListboxButton({
-        state: ListboxState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-listbox-button-1' },
-      })
+      assertListboxButton({ state: ListboxState.InvisibleUnmounted })
       assertListbox({ state: ListboxState.InvisibleUnmounted })
 
       // Open Listbox
@@ -1420,10 +1364,7 @@ describe('Rendering composition', () => {
         </Listbox>
       )
 
-      assertListboxButton({
-        state: ListboxState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-listbox-button-1' },
-      })
+      assertListboxButton({ state: ListboxState.InvisibleUnmounted })
       assertListbox({ state: ListboxState.InvisibleUnmounted })
 
       // Open Listbox
@@ -1470,18 +1411,12 @@ describe('Composition', () => {
         </Listbox>
       )
 
-      assertListboxButton({
-        state: ListboxState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-listbox-button-1' },
-      })
+      assertListboxButton({ state: ListboxState.InvisibleUnmounted })
       assertListbox({ state: ListboxState.InvisibleUnmounted })
 
       await rawClick(getListboxButton())
 
-      assertListboxButton({
-        state: ListboxState.Visible,
-        attributes: { id: 'headlessui-listbox-button-1' },
-      })
+      assertListboxButton({ state: ListboxState.Visible })
       assertListbox({
         state: ListboxState.Visible,
         textContent: JSON.stringify({
@@ -1523,10 +1458,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Open listbox
@@ -1575,10 +1507,7 @@ describe('Keyboard interactions', () => {
 
         render(<Example />)
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Open listbox
@@ -1629,10 +1558,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -1643,10 +1569,7 @@ describe('Keyboard interactions', () => {
 
         // Verify it is visible
         assertListboxButton({ state: ListboxState.Visible })
-        assertListbox({
-          state: ListboxState.Visible,
-          attributes: { id: 'headlessui-listbox-options-2' },
-        })
+        assertListbox({ state: ListboxState.Visible })
         assertActiveElement(getListbox())
         assertListboxButtonLinkedWithListbox()
 
@@ -1672,10 +1595,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -1685,10 +1605,7 @@ describe('Keyboard interactions', () => {
         await press(Keys.Space)
 
         // Verify it is still closed
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
       })
     )
@@ -1707,10 +1624,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -1721,10 +1635,7 @@ describe('Keyboard interactions', () => {
 
         // Verify it is visible
         assertListboxButton({ state: ListboxState.Visible })
-        assertListbox({
-          state: ListboxState.Visible,
-          attributes: { id: 'headlessui-listbox-options-2' },
-        })
+        assertListbox({ state: ListboxState.Visible })
         assertActiveElement(getListbox())
         assertListboxButtonLinkedWithListbox()
 
@@ -1778,10 +1689,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -1815,10 +1723,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -1854,10 +1759,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -1898,10 +1800,7 @@ describe('Keyboard interactions', () => {
 
         render(<Example />)
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Open listbox
@@ -1960,10 +1859,7 @@ describe('Keyboard interactions', () => {
 
         // Verify it is visible
         assertListboxButton({ state: ListboxState.Visible })
-        assertListbox({
-          state: ListboxState.Visible,
-          attributes: { id: 'headlessui-listbox-options-2' },
-        })
+        assertListbox({ state: ListboxState.Visible })
         assertActiveElement(getListbox())
         assertListboxButtonLinkedWithListbox()
 
@@ -1998,10 +1894,7 @@ describe('Keyboard interactions', () => {
           </>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -2012,10 +1905,7 @@ describe('Keyboard interactions', () => {
 
         // Verify it is visible
         assertListboxButton({ state: ListboxState.Visible })
-        assertListbox({
-          state: ListboxState.Visible,
-          attributes: { id: 'headlessui-listbox-options-2' },
-        })
+        assertListbox({ state: ListboxState.Visible })
         assertActiveElement(getListbox())
         assertListboxButtonLinkedWithListbox()
 
@@ -2052,10 +1942,7 @@ describe('Keyboard interactions', () => {
           </>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -2066,10 +1953,7 @@ describe('Keyboard interactions', () => {
 
         // Verify it is visible
         assertListboxButton({ state: ListboxState.Visible })
-        assertListbox({
-          state: ListboxState.Visible,
-          attributes: { id: 'headlessui-listbox-options-2' },
-        })
+        assertListbox({ state: ListboxState.Visible })
         assertActiveElement(getListbox())
         assertListboxButtonLinkedWithListbox()
 
@@ -2105,10 +1989,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -2119,10 +2000,7 @@ describe('Keyboard interactions', () => {
 
         // Verify it is visible
         assertListboxButton({ state: ListboxState.Visible })
-        assertListbox({
-          state: ListboxState.Visible,
-          attributes: { id: 'headlessui-listbox-options-2' },
-        })
+        assertListbox({ state: ListboxState.Visible })
         assertActiveElement(getListbox())
         assertListboxButtonLinkedWithListbox()
 
@@ -2150,10 +2028,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -2163,10 +2038,7 @@ describe('Keyboard interactions', () => {
         await press(Keys.ArrowDown)
 
         // Verify it is still closed
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
       })
     )
@@ -2185,10 +2057,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -2199,10 +2068,7 @@ describe('Keyboard interactions', () => {
 
         // Verify it is visible
         assertListboxButton({ state: ListboxState.Visible })
-        assertListbox({
-          state: ListboxState.Visible,
-          attributes: { id: 'headlessui-listbox-options-2' },
-        })
+        assertListbox({ state: ListboxState.Visible })
         assertActiveElement(getListbox())
         assertListboxButtonLinkedWithListbox()
 
@@ -2254,10 +2120,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -2302,10 +2165,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -2344,10 +2204,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -2380,10 +2237,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -2428,24 +2282,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
-        assertListbox({ state: ListboxState.InvisibleUnmounted })
-
-        // Focus the button
-        await focus(getListboxButton())
-
-        // Open listbox
-        await press(Keys.ArrowUp)
-
-        // Verify it is visible
-        assertListboxButton({ state: ListboxState.Visible })
-        assertListbox({
-          state: ListboxState.Visible,
-          attributes: { id: 'headlessui-listbox-options-2' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertActiveElement(getListbox())
         assertListboxButtonLinkedWithListbox()
 
@@ -2473,10 +2310,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -2486,10 +2320,7 @@ describe('Keyboard interactions', () => {
         await press(Keys.ArrowUp)
 
         // Verify it is still closed
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
       })
     )
@@ -2508,10 +2339,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -2522,10 +2350,7 @@ describe('Keyboard interactions', () => {
 
         // Verify it is visible
         assertListboxButton({ state: ListboxState.Visible })
-        assertListbox({
-          state: ListboxState.Visible,
-          attributes: { id: 'headlessui-listbox-options-2' },
-        })
+        assertListbox({ state: ListboxState.Visible })
         assertActiveElement(getListbox())
         assertListboxButtonLinkedWithListbox()
 
@@ -2581,10 +2406,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -2619,10 +2441,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -2661,10 +2480,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -2675,10 +2491,7 @@ describe('Keyboard interactions', () => {
 
         // Verify it is visible
         assertListboxButton({ state: ListboxState.Visible })
-        assertListbox({
-          state: ListboxState.Visible,
-          attributes: { id: 'headlessui-listbox-options-2' },
-        })
+        assertListbox({ state: ListboxState.Visible })
         assertActiveElement(getListbox())
         assertListboxButtonLinkedWithListbox()
 
@@ -2718,10 +2531,7 @@ describe('Keyboard interactions', () => {
           </Listbox>
         )
 
-        assertListboxButton({
-          state: ListboxState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-listbox-button-1' },
-        })
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
         assertListbox({ state: ListboxState.InvisibleUnmounted })
 
         // Focus the button
@@ -2732,11 +2542,7 @@ describe('Keyboard interactions', () => {
 
         // Verify it is visible
         assertListboxButton({ state: ListboxState.Visible })
-        assertListbox({
-          state: ListboxState.Visible,
-          attributes: { id: 'headlessui-listbox-options-2' },
-          orientation: 'horizontal',
-        })
+        assertListbox({ state: ListboxState.Visible, orientation: 'horizontal' })
         assertActiveElement(getListbox())
         assertListboxButtonLinkedWithListbox()
 
@@ -3675,10 +3481,7 @@ describe('Mouse interactions', () => {
         </Listbox>
       )
 
-      assertListboxButton({
-        state: ListboxState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-listbox-button-1' },
-      })
+      assertListboxButton({ state: ListboxState.InvisibleUnmounted })
       assertListbox({ state: ListboxState.InvisibleUnmounted })
 
       // Open listbox
@@ -3686,10 +3489,7 @@ describe('Mouse interactions', () => {
 
       // Verify it is visible
       assertListboxButton({ state: ListboxState.Visible })
-      assertListbox({
-        state: ListboxState.Visible,
-        attributes: { id: 'headlessui-listbox-options-2' },
-      })
+      assertListbox({ state: ListboxState.Visible })
       assertActiveElement(getListbox())
       assertListboxButtonLinkedWithListbox()
 
@@ -3714,10 +3514,7 @@ describe('Mouse interactions', () => {
         </Listbox>
       )
 
-      assertListboxButton({
-        state: ListboxState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-listbox-button-1' },
-      })
+      assertListboxButton({ state: ListboxState.InvisibleUnmounted })
       assertListbox({ state: ListboxState.InvisibleUnmounted })
 
       // Try to open the listbox
@@ -3742,20 +3539,14 @@ describe('Mouse interactions', () => {
         </Listbox>
       )
 
-      assertListboxButton({
-        state: ListboxState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-listbox-button-1' },
-      })
+      assertListboxButton({ state: ListboxState.InvisibleUnmounted })
       assertListbox({ state: ListboxState.InvisibleUnmounted })
 
       // Try to open the listbox
       await click(getListboxButton())
 
       // Verify it is still closed
-      assertListboxButton({
-        state: ListboxState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-listbox-button-1' },
-      })
+      assertListboxButton({ state: ListboxState.InvisibleUnmounted })
       assertListbox({ state: ListboxState.InvisibleUnmounted })
     })
   )
@@ -3774,10 +3565,7 @@ describe('Mouse interactions', () => {
         </Listbox>
       )
 
-      assertListboxButton({
-        state: ListboxState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-listbox-button-1' },
-      })
+      assertListboxButton({ state: ListboxState.InvisibleUnmounted })
       assertListbox({ state: ListboxState.InvisibleUnmounted })
 
       // Open listbox
@@ -3785,10 +3573,7 @@ describe('Mouse interactions', () => {
 
       // Verify it is visible
       assertListboxButton({ state: ListboxState.Visible })
-      assertListbox({
-        state: ListboxState.Visible,
-        attributes: { id: 'headlessui-listbox-options-2' },
-      })
+      assertListbox({ state: ListboxState.Visible })
       assertActiveElement(getListbox())
       assertListboxButtonLinkedWithListbox()
 

packages/@headlessui-react/src/components/menu/menu.test.tsx

@@ -33,8 +33,6 @@ import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import { Transition } from '../transition/transition'
 import { Menu, MenuButton, MenuItem, MenuItems } from './menu'
 
-jest.mock('../../hooks/use-id')
-
 beforeAll(() => {
   jest.spyOn(window, 'requestAnimationFrame').mockImplementation(setImmediate as any)
   jest.spyOn(window, 'cancelAnimationFrame').mockImplementation(clearImmediate as any)
@@ -98,18 +96,12 @@ describe('Rendering', () => {
           </Menu>
         )
 
-        assertMenuButton({
-          state: MenuState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-menu-button-1' },
-        })
+        assertMenuButton({ state: MenuState.InvisibleUnmounted })
         assertMenu({ state: MenuState.InvisibleUnmounted })
 
         await click(getMenuButton())
 
-        assertMenuButton({
-          state: MenuState.Visible,
-          attributes: { id: 'headlessui-menu-button-1' },
-        })
+        assertMenuButton({ state: MenuState.Visible })
         assertMenu({ state: MenuState.Visible })
       })
     )
@@ -169,7 +161,6 @@ describe('Rendering', () => {
 
         assertMenuButton({
           state: MenuState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-menu-button-1' },
           textContent: JSON.stringify({
             open: false,
             active: false,
@@ -185,7 +176,6 @@ describe('Rendering', () => {
 
         assertMenuButton({
           state: MenuState.Visible,
-          attributes: { id: 'headlessui-menu-button-1' },
           textContent: JSON.stringify({
             open: true,
             active: true,
@@ -217,7 +207,6 @@ describe('Rendering', () => {
 
         assertMenuButton({
           state: MenuState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-menu-button-1' },
           textContent: JSON.stringify({
             open: false,
             active: false,
@@ -233,7 +222,6 @@ describe('Rendering', () => {
 
         assertMenuButton({
           state: MenuState.Visible,
-          attributes: { id: 'headlessui-menu-button-1' },
           textContent: JSON.stringify({
             open: true,
             active: true,
@@ -353,7 +341,6 @@ describe('Rendering', () => {
 
         assertMenuButton({
           state: MenuState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-menu-button-1' },
         })
         assertMenu({ state: MenuState.InvisibleUnmounted })
 
@@ -361,7 +348,6 @@ describe('Rendering', () => {
 
         assertMenuButton({
           state: MenuState.Visible,
-          attributes: { id: 'headlessui-menu-button-1' },
         })
         assertMenu({
           state: MenuState.Visible,
@@ -422,7 +408,6 @@ describe('Rendering', () => {
 
         assertMenuButton({
           state: MenuState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-menu-button-1' },
         })
         assertMenu({ state: MenuState.InvisibleUnmounted })
 
@@ -430,7 +415,6 @@ describe('Rendering', () => {
 
         assertMenuButton({
           state: MenuState.Visible,
-          attributes: { id: 'headlessui-menu-button-1' },
         })
         assertMenu({
           state: MenuState.Visible,
@@ -583,7 +567,6 @@ describe('Rendering composition', () => {
 
       assertMenuButton({
         state: MenuState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-menu-button-1' },
       })
       assertMenu({ state: MenuState.InvisibleUnmounted })
 
@@ -652,7 +635,6 @@ describe('Rendering composition', () => {
 
       assertMenuButton({
         state: MenuState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-menu-button-1' },
       })
       assertMenu({ state: MenuState.InvisibleUnmounted })
 
@@ -748,7 +730,6 @@ describe('Composition', () => {
 
       assertMenuButton({
         state: MenuState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-menu-button-1' },
       })
       assertMenu({ state: MenuState.InvisibleUnmounted })
 
@@ -756,7 +737,6 @@ describe('Composition', () => {
 
       assertMenuButton({
         state: MenuState.Visible,
-        attributes: { id: 'headlessui-menu-button-1' },
       })
       assertMenu({
         state: MenuState.Visible,
@@ -802,16 +782,12 @@ describe('Composition', () => {
 
       assertMenuButton({
         state: MenuState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-menu-button-1' },
       })
       assertMenu({ state: MenuState.InvisibleUnmounted })
 
       await rawClick(getMenuButton())
 
-      assertMenuButton({
-        state: MenuState.Visible,
-        attributes: { id: 'headlessui-menu-button-1' },
-      })
+      assertMenuButton({ state: MenuState.Visible })
       assertMenu({
         state: MenuState.Visible,
         textContent: JSON.stringify({ active: false, focus: false, disabled: false }),

packages/@headlessui-react/src/components/popover/popover.test.tsx

@@ -18,8 +18,6 @@ import { Portal } from '../portal/portal'
 import { Transition } from '../transition/transition'
 import { Popover, PopoverButton, PopoverPanel } from './popover'
 
-jest.mock('../../hooks/use-id')
-
 afterAll(() => jest.restoreAllMocks())
 
 function nextFrame() {
@@ -57,10 +55,7 @@ describe('Safe guards', () => {
         </Popover>
       )
 
-      assertPopoverButton({
-        state: PopoverState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-popover-button-1' },
-      })
+      assertPopoverButton({ state: PopoverState.InvisibleUnmounted })
       assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
     })
   )
@@ -124,18 +119,12 @@ describe('Rendering', () => {
           </Popover>
         )
 
-        assertPopoverButton({
-          state: PopoverState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-popover-button-1' },
-        })
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted })
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
         await click(getPopoverButton())
 
-        assertPopoverButton({
-          state: PopoverState.Visible,
-          attributes: { id: 'headlessui-popover-button-1' },
-        })
+        assertPopoverButton({ state: PopoverState.Visible })
         assertPopoverPanel({ state: PopoverState.Visible, textContent: 'Panel is: open' })
       })
     )
@@ -349,18 +338,12 @@ describe('Rendering', () => {
           </Popover>
         )
 
-        assertPopoverButton({
-          state: PopoverState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-popover-button-1' },
-        })
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted })
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
         await click(getPopoverButton())
 
-        assertPopoverButton({
-          state: PopoverState.Visible,
-          attributes: { id: 'headlessui-popover-button-1' },
-        })
+        assertPopoverButton({ state: PopoverState.Visible })
         assertPopoverPanel({ state: PopoverState.Visible })
       })
     )
@@ -376,7 +359,6 @@ describe('Rendering', () => {
 
         assertPopoverButton({
           state: PopoverState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-popover-button-1' },
           textContent: JSON.stringify({
             open: false,
             active: false,
@@ -392,7 +374,6 @@ describe('Rendering', () => {
 
         assertPopoverButton({
           state: PopoverState.Visible,
-          attributes: { id: 'headlessui-popover-button-1' },
           textContent: JSON.stringify({
             open: true,
             active: true,
@@ -420,7 +401,6 @@ describe('Rendering', () => {
 
         assertPopoverButton({
           state: PopoverState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-popover-button-1' },
           textContent: JSON.stringify({
             open: false,
             active: false,
@@ -436,7 +416,6 @@ describe('Rendering', () => {
 
         assertPopoverButton({
           state: PopoverState.Visible,
-          attributes: { id: 'headlessui-popover-button-1' },
           textContent: JSON.stringify({
             open: true,
             active: true,
@@ -522,18 +501,12 @@ describe('Rendering', () => {
           </Popover>
         )
 
-        assertPopoverButton({
-          state: PopoverState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-popover-button-1' },
-        })
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted })
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
         await click(getPopoverButton())
 
-        assertPopoverButton({
-          state: PopoverState.Visible,
-          attributes: { id: 'headlessui-popover-button-1' },
-        })
+        assertPopoverButton({ state: PopoverState.Visible })
         assertPopoverPanel({
           state: PopoverState.Visible,
           textContent: JSON.stringify({ open: true }),
@@ -1032,10 +1005,7 @@ describe('Keyboard interactions', () => {
           </Popover>
         )
 
-        assertPopoverButton({
-          state: PopoverState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-popover-button-1' },
-        })
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted })
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
         // Focus the button
@@ -1046,10 +1016,7 @@ describe('Keyboard interactions', () => {
 
         // Verify it is open
         assertPopoverButton({ state: PopoverState.Visible })
-        assertPopoverPanel({
-          state: PopoverState.Visible,
-          attributes: { id: 'headlessui-popover-panel-3' },
-        })
+        assertPopoverPanel({ state: PopoverState.Visible })
 
         // Close popover
         await press(Keys.Enter)
@@ -1067,10 +1034,7 @@ describe('Keyboard interactions', () => {
           </Popover>
         )
 
-        assertPopoverButton({
-          state: PopoverState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-popover-button-1' },
-        })
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted })
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
         // Focus the button
@@ -1080,10 +1044,7 @@ describe('Keyboard interactions', () => {
         await press(Keys.Enter)
 
         // Verify it is still closed
-        assertPopoverButton({
-          state: PopoverState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-popover-button-1' },
-        })
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted })
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
       })
     )
@@ -1098,10 +1059,7 @@ describe('Keyboard interactions', () => {
           </Popover>
         )
 
-        assertPopoverButton({
-          state: PopoverState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-popover-button-1' },
-        })
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted })
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
         // Focus the button
@@ -1112,10 +1070,7 @@ describe('Keyboard interactions', () => {
 
         // Verify it is open
         assertPopoverButton({ state: PopoverState.Visible })
-        assertPopoverPanel({
-          state: PopoverState.Visible,
-          attributes: { id: 'headlessui-popover-panel-3' },
-        })
+        assertPopoverPanel({ state: PopoverState.Visible })
 
         // Close popover
         await press(Keys.Enter)
@@ -2081,10 +2036,7 @@ describe('Keyboard interactions', () => {
           </Popover>
         )
 
-        assertPopoverButton({
-          state: PopoverState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-popover-button-1' },
-        })
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted })
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
         // Focus the button
@@ -2095,10 +2047,7 @@ describe('Keyboard interactions', () => {
 
         // Verify it is open
         assertPopoverButton({ state: PopoverState.Visible })
-        assertPopoverPanel({
-          state: PopoverState.Visible,
-          attributes: { id: 'headlessui-popover-panel-3' },
-        })
+        assertPopoverPanel({ state: PopoverState.Visible })
       })
     )
 
@@ -2112,10 +2061,7 @@ describe('Keyboard interactions', () => {
           </Popover>
         )
 
-        assertPopoverButton({
-          state: PopoverState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-popover-button-1' },
-        })
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted })
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
         // Focus the button
@@ -2125,10 +2071,7 @@ describe('Keyboard interactions', () => {
         await press(Keys.Space)
 
         // Verify it is still closed
-        assertPopoverButton({
-          state: PopoverState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-popover-button-1' },
-        })
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted })
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
       })
     )
@@ -2143,10 +2086,7 @@ describe('Keyboard interactions', () => {
           </Popover>
         )
 
-        assertPopoverButton({
-          state: PopoverState.InvisibleUnmounted,
-          attributes: { id: 'headlessui-popover-button-1' },
-        })
+        assertPopoverButton({ state: PopoverState.InvisibleUnmounted })
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
         // Focus the button
@@ -2157,10 +2097,7 @@ describe('Keyboard interactions', () => {
 
         // Verify it is open
         assertPopoverButton({ state: PopoverState.Visible })
-        assertPopoverPanel({
-          state: PopoverState.Visible,
-          attributes: { id: 'headlessui-popover-panel-3' },
-        })
+        assertPopoverPanel({ state: PopoverState.Visible })
 
         // Close popover
         await press(Keys.Space)
@@ -2292,10 +2229,7 @@ describe('Mouse interactions', () => {
         </Popover>
       )
 
-      assertPopoverButton({
-        state: PopoverState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-popover-button-1' },
-      })
+      assertPopoverButton({ state: PopoverState.InvisibleUnmounted })
       assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
       // Open popover
@@ -2303,10 +2237,7 @@ describe('Mouse interactions', () => {
 
       // Verify it is open
       assertPopoverButton({ state: PopoverState.Visible })
-      assertPopoverPanel({
-        state: PopoverState.Visible,
-        attributes: { id: 'headlessui-popover-panel-3' },
-      })
+      assertPopoverPanel({ state: PopoverState.Visible })
     })
   )
 
@@ -2320,20 +2251,14 @@ describe('Mouse interactions', () => {
         </Popover>
       )
 
-      assertPopoverButton({
-        state: PopoverState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-popover-button-1' },
-      })
+      assertPopoverButton({ state: PopoverState.InvisibleUnmounted })
       assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
       // Open popover
       await click(getPopoverButton(), MouseButton.Right)
 
       // Verify it is still closed
-      assertPopoverButton({
-        state: PopoverState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-popover-button-1' },
-      })
+      assertPopoverButton({ state: PopoverState.InvisibleUnmounted })
       assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
     })
   )
@@ -2348,20 +2273,14 @@ describe('Mouse interactions', () => {
         </Popover>
       )
 
-      assertPopoverButton({
-        state: PopoverState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-popover-button-1' },
-      })
+      assertPopoverButton({ state: PopoverState.InvisibleUnmounted })
       assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
       // Try to open the popover
       await click(getPopoverButton())
 
       // Verify it is still closed
-      assertPopoverButton({
-        state: PopoverState.InvisibleUnmounted,
-        attributes: { id: 'headlessui-popover-button-1' },
-      })
+      assertPopoverButton({ state: PopoverState.InvisibleUnmounted })
       assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
     })
   )

packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx

@@ -12,8 +12,6 @@ import { Keys, click, focus, press, shift } from '../../test-utils/interactions'
 import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import { RadioGroup } from './radio-group'
 
-jest.mock('../../hooks/use-id')
-
 beforeAll(() => {
   jest.spyOn(window, 'requestAnimationFrame').mockImplementation(setImmediate as any)
   jest.spyOn(window, 'cancelAnimationFrame').mockImplementation(clearImmediate as any)

packages/@headlessui-react/src/components/switch/switch.test.tsx

@@ -11,8 +11,6 @@ import {
 import { click, focus, Keys, mouseEnter, press } from '../../test-utils/interactions'
 import { Switch } from './switch'
 
-jest.mock('../../hooks/use-id')
-
 describe('Safe guards', () => {
   it('should be possible to render a Switch without crashing', () => {
     render(<Switch checked={false} onChange={console.log} />)

packages/@headlessui-react/src/components/tabs/tabs.test.tsx

@@ -11,8 +11,6 @@ import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import { Dialog } from '../dialog/dialog'
 import { Tab } from './tabs'
 
-jest.mock('../../hooks/use-id')
-
 beforeAll(() => {
   jest.spyOn(window, 'requestAnimationFrame').mockImplementation(setImmediate as any)
   jest.spyOn(window, 'cancelAnimationFrame').mockImplementation(clearImmediate as any)