From ad36fbb681b0fe62595fc3acf7f32f1abde1819d Mon Sep 17 00:00:00 2001
From: David Sancho Moreno <dsnxmoreno@gmail.com>
Date: Mon, 25 Nov 2024 16:09:24 +0100
Subject: [PATCH] Bind React.act and React.actAsync

---
 src/React.re        |  4 ++++
 src/React.rei       |  4 ++++
 test/Form__test.re  |  2 +-
 test/React__test.re | 32 ++++++++++++++++++++++++++++++++
 4 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/React.re b/src/React.re
index 431b7a05a..22ff09744 100644
--- a/src/React.re
+++ b/src/React.re
@@ -885,6 +885,10 @@ external startTransition: ([@mel.uncurry] (unit => unit)) => unit =
 external useDebugValue: ('value, ~format: 'value => string=?, unit) => unit =
   "useDebugValue";
 
+[@mel.module "react"] external act: (unit => unit) => unit = "act";
+[@mel.module "react"]
+external actAsync: (unit => Js.Promise.t(unit)) => unit = "act";
+
 module Experimental = {
   /* This module is used to bind to APIs for future versions of React. There is no guarantee of backwards compatibility or stability. */
   /* https://react.dev/reference/react/use */
diff --git a/src/React.rei b/src/React.rei
index 372337618..1c3be073e 100644
--- a/src/React.rei
+++ b/src/React.rei
@@ -573,6 +573,10 @@ external startTransition: ([@mel.uncurry] (unit => unit)) => unit =
 external useTransition: unit => (bool, callback(callback(unit, unit), unit)) =
   "useTransition";
 
+[@mel.module "react"] external act: (unit => unit) => unit = "act";
+[@mel.module "react"]
+external actAsync: (unit => Js.Promise.t(unit)) => unit = "act";
+
 module Experimental: {
   /* This module is used to bind to APIs for future versions of React. There is no guarantee of backwards compatibility or stability. */
   [@mel.module "react"] external usePromise: Js.Promise.t('a) => 'a = "use";
diff --git a/test/Form__test.re b/test/Form__test.re
index ce34b2922..2269a9c0e 100644
--- a/test/Form__test.re
+++ b/test/Form__test.re
@@ -87,7 +87,7 @@ module App = {
       React.useState(() =>
         [
           {
-            text: "¡Hola!",
+            text: {j|¡Hola!|j},
             sending: false,
             key: 1,
           },
diff --git a/test/React__test.re b/test/React__test.re
index e7b624355..fa447654b 100644
--- a/test/React__test.re
+++ b/test/React__test.re
@@ -233,6 +233,38 @@ describe("React", () => {
     expect(image->getAttribute("src"))->toEqual(Some("https://foo.png"));
   });
 
+  test("React.act", () => {
+    module Counter = {
+      [@react.component]
+      let make = () => {
+        let (count, setCount) = React.useState(() => 0);
+
+        <div>
+          <button role="Increment" onClick={_ => setCount(prev => prev + 1)}>
+            {React.string("Increment")}
+          </button>
+          <span role="counter"> {React.string(string_of_int(count))} </span>
+        </div>;
+      };
+    };
+
+    let containerRef: ref(Js.nullable(ReactTestingLibrary.renderResult)) =
+      ref(Js.Nullable.null);
+
+    React.act(() => {
+      let container = ReactTestingLibrary.render(<Counter />);
+      let button = getByRole("Increment", container);
+      FireEvent.click(button);
+      containerRef.contents = Js.Nullable.return(container);
+    });
+
+    switch (Js.Nullable.toOption(containerRef.contents)) {
+    | Some(container) =>
+      expect(getByRole("counter", container)->innerHTML)->toBe("1")
+    | None => failwith("Container is null")
+    };
+  });
+
   test("ErrorBoundary + Suspense", () => {
     [%mel.raw "console.error = () => {}"] |> ignore;