From 8c6546f0d5b6d5570ba47e56865322aa15f98470 Mon Sep 17 00:00:00 2001
From: Jason Addleman <jason.addleman@shopify.com>
Date: Mon, 6 May 2024 11:09:47 -0400
Subject: [PATCH] Try to use act from 'react'

---
 .changeset/flat-paws-exercise.md    | 5 +++++
 packages/react-testing/src/root.tsx | 8 ++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/flat-paws-exercise.md

diff --git a/.changeset/flat-paws-exercise.md b/.changeset/flat-paws-exercise.md
new file mode 100644
index 0000000000..555514b31f
--- /dev/null
+++ b/.changeset/flat-paws-exercise.md
@@ -0,0 +1,5 @@
+---
+'@shopify/react-testing': minor
+---
+
+Change act to use from 'react' if it exists, fallback to 'react-dom/test-utils'
diff --git a/packages/react-testing/src/root.tsx b/packages/react-testing/src/root.tsx
index 884f000c51..e54bf06d7d 100644
--- a/packages/react-testing/src/root.tsx
+++ b/packages/react-testing/src/root.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {flushSync} from 'react-dom';
 import type {Root as ReactRoot} from 'react-dom/client';
-import {act} from 'react-dom/test-utils';
+import {act as oldAct} from 'react-dom/test-utils';
 import {findCurrentFiberUsingSlowPath} from 'react-reconciler/reflection.js';
 
 import {TestWrapper} from './TestWrapper';
@@ -22,6 +22,9 @@ import type {
 } from './types';
 import {Tag} from './types';
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const {act} = require('react');
+
 type ResolveRoot = (element: Element<unknown>) => Element<unknown> | null;
 type Render = (
   element: React.ReactElement<unknown>,
@@ -109,6 +112,7 @@ export class Root<Props> implements Node<Props> {
     }
 
     this.acting = true;
+    const currentAct = act ?? oldAct;
 
     /* act has two versions, act(() => void) or await act(async () => void)
      * The async version will wrap the inner async function so that it maintains an act
@@ -124,7 +128,7 @@ export class Root<Props> implements Node<Props> {
      * check the return value of result to determine if it needs awaiting so that it can
      * properly flush updates.
      */
-    const possiblyAwaitableAct = act(() => {
+    const possiblyAwaitableAct = currentAct(() => {
       flushSync(() => {
         result = action();
       });