Fix Form__test with RTL

Author: davesnx

package-lock.json

@@ -26,9 +26,8 @@
   "homepage": "https://reasonml.github.io/reason-react/",
   "devDependencies": {
     "jest": "^26.0.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0"
+    "react": "19.0.0-rc.1",
+    "react-dom": "19.0.0-rc.1"
   },
   "jest": {
     "moduleDirectories": [

package.json

@@ -1,7 +1,4 @@
 open Jest;
-open Jest.Expect;
-open ReactDOMTestUtils;
-open Belt;
 
 module FormData = React.Experimental.FormData;
 
@@ -25,7 +22,11 @@ module Thread = {
     let (optimisticMessages, addOptimisticMessage) =
       React.Experimental.useOptimistic(messages, (state, newMessage) =>
         [
-          {text: newMessage, sending: true, key: List.length(state) + 1},
+          {
+            text: newMessage,
+            sending: true,
+            key: List.length(state) + 1,
+          },
           ...state,
         ]
       );
@@ -49,24 +50,26 @@ module Thread = {
       };
     };
     <>
-      {{
-         optimisticMessages->Belt.List.map(message =>
-           <div key={Int.toString(message.key)}>
-             {React.string(message.text)}
-             {message.sending
-                ? React.null
-                : <small> {React.string("(Enviando...)")} </small>}
-           </div>
-         );
-       }
-       ->Belt.List.toArray
-       ->React.array}
+      <div id="messages">
+        {{
+           optimisticMessages->Belt.List.map(message =>
+             <span key={Belt.Int.toString(message.key)}>
+               {React.string(message.text)}
+               {message.sending
+                  ? React.null
+                  : <small> {React.string("(Enviando...)")} </small>}
+             </span>
+           );
+         }
+         ->Belt.List.toArray
+         ->React.array}
+      </div>
       {React.cloneElement(
          ReactDOM.createElement(
            "form",
            ~props=ReactDOM.domProps(~ref=ReactDOM.Ref.domRef(formRef), ()),
            [|
-             <input type_="text" name="message" placeholder="Hola!" />,
+             <input type_="text" name="message" placeholder="message" />,
              <button type_="submit"> {React.string("Enviar")} </button>,
            |],
          ),
@@ -84,7 +87,15 @@ module App = {
   [@react.component]
   let make = () => {
     let (messages, setMessages) =
-      React.useState(() => [{text: "¡Hola!", sending: false, key: 1}]);
+      React.useState(() =>
+        [
+          {
+            text: "Hola!",
+            sending: false,
+            key: 1,
+          },
+        ]
+      );
 
     let sendMessage = formData => {
       let formMessage = FormData.get("message", formData);
@@ -95,7 +106,14 @@ module App = {
         | JSString(text) =>
           let _ =
             setMessages(messages =>
-              [{text, sending: true, key: 1}, ...messages]
+              [
+                {
+                  text,
+                  sending: true,
+                  key: 1,
+                },
+                ...messages,
+              ]
             );
           Js.Promise.resolve();
         | _ => Js.Promise.resolve()
@@ -108,46 +126,38 @@ module App = {
   };
 };
 
-describe("Form with useOptimistic", () => {
-  let container = ref(None);
-
-  beforeEach(prepareContainer(container));
-  afterEach(cleanupContainer(container));
-
-  test("should render the form", () => {
-    let container = getContainer(container);
-    let root = ReactDOM.Client.createRoot(container);
+let (let.await) = (p, f) => Js.Promise.then_(f, p);
+let (let.catch) = (p, f) => Js.Promise.then_(f, p);
 
-    act(() => ReactDOM.Client.render(root, <App />));
+let findByString = (text, container) =>
+  ReactTestingLibrary.findByText(~matcher=`Str(text), container);
 
-    expect(
-      container
-      ->DOM.findBySelectorAndTextContent("button", "0")
-      ->Option.isSome,
-    )
-    ->toBe(true);
+let findByPlaceholderText = (text, container) =>
+  ReactTestingLibrary.findByPlaceholderText(~matcher=`Str(text), container);
 
-    let button = container->DOM.findBySelector("button");
+describe("Form with useOptimistic", () => {
+  testPromise("should render the form", finish => {
+    let container = ReactTestingLibrary.render(<App />);
+
+    ReactTestingLibrary.actAsync(() => {
+      let.await _ = findByString("Hola!", container);
+
+      let.await button = findByString("Enviar", container);
+      let.await input = findByPlaceholderText("message", container);
+
+      FireEvent.change(
+        input,
+        ~eventInit={
+          "target": {
+            "value": "Let's go!",
+          },
+        },
+      );
 
-    act(() => {
-      switch (button) {
-      | Some(button) => Simulate.click(button)
-      | None => ()
-      }
+      FireEvent.click(button);
+      let.await _newMessage = findByString("Let's go!", container);
+      /* If the promise resolve, means the node is found in the DOM */
+      finish();
     });
-
-    expect(
-      container
-      ->DOM.findBySelectorAndTextContent("button", "0")
-      ->Option.isSome,
-    )
-    ->toBe(false);
-
-    expect(
-      container
-      ->DOM.findBySelectorAndTextContent("button", "1")
-      ->Option.isSome,
-    )
-    ->toBe(true);
-  });
+  })
 });

test/Form__test.re

@@ -8,7 +8,7 @@
   reason-react.node
   jest
   melange.belt
-  melange-testing-library.dom
-  melange-testing-library.react)
+  melange_testing_library_dom
+  melange_testing_library_react)
  (preprocess
   (pps melange.ppx reason-react-ppx)))

test/dune

@@ -22,6 +22,25 @@ let testAsync: (~timeout: int=?, string, (unit => unit) => unit) => unit =
   (~timeout=?, name, f) =>
     testAsyncU(name, callback => f(callback), timeout);
 
+external testPromiseU:
+  (
+    string,
+    (unit => Js.Promise.t(unit)) => Js.Promise.t(unit),
+    option(int)
+  ) =>
+  unit =
+  "test";
+
+let testPromise:
+  (
+    ~timeout: int=?,
+    string,
+    (unit => Js.Promise.t(unit)) => Js.Promise.t(unit)
+  ) =>
+  unit =
+  (~timeout=?, name, f) =>
+    testPromiseU(name, callback => f(callback), timeout);
+
 module Only = {
   [@mel.scope "describe"]
   external describeU: (string, (. unit) => unit) => unit = "only";