Fix a few Transition-related tests

src/lib/components/listbox/listbox.test.ts

@@ -63,6 +63,16 @@ beforeAll(() => {
 })
 afterAll(() => jest.restoreAllMocks())
 
+function nextFrame() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        resolve();
+      });
+    });
+  });
+}
+
 describe('safeguards', () => {
   it.each([
     ['ListboxButton', ListboxButton],
@@ -610,8 +620,7 @@ describe('Rendering composition', () => {
 
 
 describe('Composition', () => {
-  // TODO: fix this test
+  it(
-  it.skip(
     'should be possible to wrap the ListboxOptions with a Transition component',
     suppressConsoleLogs(async () => {
       let orderFn = jest.fn()
@@ -653,6 +662,9 @@ describe('Composition', () => {
 
       await click(getListboxButton())
 
+      // Wait for all transitions to finish
+      await nextFrame()
+
       // Verify that we tracked the `mounts` and `unmounts` in the correct order
       expect(orderFn.mock.calls).toEqual([
         ['Mounting - Listbox'],

src/lib/components/menu/menu.test.ts

@@ -26,6 +26,16 @@ beforeAll(() => {
 })
 afterAll(() => jest.restoreAllMocks())
 
+function nextFrame() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        resolve();
+      });
+    });
+  });
+}
+
 describe('Safe guards', () => {
   it.each([
     ['MenuButton', MenuButton],
@@ -464,7 +474,7 @@ describe('Rendering composition', () => {
 })
 
 describe('Composition', () => {
-  it.skip(
+  it(
     'should be possible to wrap the MenuItems with a Transition component',
     suppressConsoleLogs(async () => {
       let orderFn = jest.fn()
@@ -506,6 +516,9 @@ describe('Composition', () => {
 
       await click(getMenuButton())
 
+      // Wait for all transitions to finish
+      await nextFrame()
+
       // Verify that we tracked the `mounts` and `unmounts` in the correct order
       expect(orderFn.mock.calls).toEqual([
         ['Mounting - Menu'],
@@ -517,8 +530,8 @@ describe('Composition', () => {
     })
   )
 
-  it.skip(
+  it(
-    'should be possible to wrap the MenuItems with a Transition.Child component',
+    'should be possible to wrap the MenuItems with a TransitionChild component',
     suppressConsoleLogs(async () => {
       let orderFn = jest.fn()
       render(
@@ -559,6 +572,9 @@ describe('Composition', () => {
 
       await click(getMenuButton())
 
+      // Wait for all transitions to finish
+      await nextFrame()
+
       // Verify that we tracked the `mounts` and `unmounts` in the correct order
       expect(orderFn.mock.calls).toEqual([
         ['Mounting - Menu'],