fix false positive log when running tests

Let's wrap the test in `act` to get rid of the warning. In practice
(while testing in the browser) the actual warning doesn't seem to affect
the user experience at all.

The `act` function is typed in a strange way (`Promise<undefined> &
void`). Yet the actual contents of the `act` callback is returned as
expected. Therefore we overrode the type of `act` to make sure this
reflects reality better. (Thanks @thecrypticace!)

Also added an additional check to make sure the actual `container` is
available to extra ensure we are not lying by overriding the type.

Author: RobinMalfait

packages/@headlessui-react/src/components/transitions/transition.test.tsx

@@ -1,11 +1,13 @@
 import React, { Fragment, useState, useRef, useLayoutEffect, useEffect } from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, act as _act } from '@testing-library/react'
 
 import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import { Transition } from './transition'
 
 import { executeTimeline } from '../../test-utils/execute-timeline'
 
+let act = _act as unknown as <T>(fn: () => T) => PromiseLike<T>
+
 function nextFrame() {
   return new Promise<void>((resolve) => {
     requestAnimationFrame(() => {
@@ -423,22 +425,26 @@ describe('Setup API', () => {
       `)
     })
 
-    it('should be possible to passthrough the transition classes and immediately apply the enter transitions when appear is set to true', () => {
-      let { container } = render(
-        <Transition
-          show={true}
-          appear={true}
-          enter="enter"
-          enterFrom="enter-from"
-          enterTo="enter-to"
-          leave="leave"
-          leaveFrom="leave-from"
-          leaveTo="leave-to"
-        >
-          Children
-        </Transition>
+    it('should be possible to passthrough the transition classes and immediately apply the enter transitions when appear is set to true', async () => {
+      let { container } = await act(() =>
+        render(
+          <Transition
+            show={true}
+            appear={true}
+            enter="enter"
+            enterFrom="enter-from"
+            enterTo="enter-to"
+            leave="leave"
+            leaveFrom="leave-from"
+            leaveTo="leave-to"
+          >
+            Children
+          </Transition>
+        )
       )
 
+      expect(container).toBeDefined()
+
       expect(container.firstChild).toMatchInlineSnapshot(`
         <div
           class="enter enter-from"