Add some tests

test/React__test.re

@@ -44,12 +44,68 @@ module DummyReducerComponent = {
 module DummyComponentWithEffect = {
   [@react.component]
   let make = (~value=0, ~callback, ()) => {
-    React.useEffect1(() => {callback(value)}, [|value|]);
+    React.useEffect1(
+      () => {
+        callback(value);
+        None;
+      },
+      [|value|],
+    );
 
     <div />;
   };
 };
 
+module DummyComponentWithRefAndEffect = {
+  [@react.component]
+  let make = (~callback, ()) => {
+    let myRef = React.useRef(1);
+    React.useEffect0(() => {
+      myRef.current = myRef.current + 1;
+      callback(myRef);
+      None;
+    });
+    <div />;
+  };
+};
+
+module DummyComponentThatMapsChildren = {
+  [@react.component]
+  let make = (~children, ()) => {
+    <div>
+      {children->React.Children.mapWithIndex((element, index) => {
+         React.cloneElement(
+           element,
+           {"key": {j|$index|j}, "data-index": index},
+         )
+       })}
+    </div>;
+  };
+};
+
+module DummyContext = {
+  let context = React.createContext(0);
+  module Provider = {
+    [@bs.obj]
+    external makeProps:
+      (~value: int, ~children: React.element, unit) =>
+      {
+        .
+        "value": int,
+        "children": React.element,
+      };
+    let make = context->React.Context.provider;
+  };
+
+  module Consumer = {
+    [@react.component]
+    let make = () => {
+      let value = React.useContext(context);
+      <div> value->React.int </div>;
+    };
+  };
+};
+
 describe("React", ({test, beforeEach, afterEach}) => {
   let container = ref(None);
 
@@ -71,6 +127,118 @@ describe("React", ({test, beforeEach, afterEach}) => {
       toBeTrue();
   });
 
+  test("can render null elements", ({expect}) => {
+    let container = getContainer(container);
+
+    act(() => {ReactDOMRe.render(<div> React.null </div>, container)});
+
+    expect.bool(
+      container
+      ->DOM.findBySelectorAndPartialTextContent("div", "")
+      ->Option.isSome,
+    ).
+      toBeTrue();
+  });
+
+  test("can render string elements", ({expect}) => {
+    let container = getContainer(container);
+
+    act(() => {
+      ReactDOMRe.render(<div> "Hello"->React.string </div>, container)
+    });
+
+    expect.bool(
+      container
+      ->DOM.findBySelectorAndPartialTextContent("div", "Hello")
+      ->Option.isSome,
+    ).
+      toBeTrue();
+  });
+
+  test("can render int elements", ({expect}) => {
+    let container = getContainer(container);
+
+    act(() => {ReactDOMRe.render(<div> 12345->React.int </div>, container)});
+
+    expect.bool(
+      container
+      ->DOM.findBySelectorAndPartialTextContent("div", "12345")
+      ->Option.isSome,
+    ).
+      toBeTrue();
+  });
+
+  test("can render float elements", ({expect}) => {
+    let container = getContainer(container);
+
+    act(() => {
+      ReactDOMRe.render(<div> 12.345->React.float </div>, container)
+    });
+
+    expect.bool(
+      container
+      ->DOM.findBySelectorAndPartialTextContent("div", "12.345")
+      ->Option.isSome,
+    ).
+      toBeTrue();
+  });
+
+  test("can render array of elements", ({expect}) => {
+    let container = getContainer(container);
+    let array =
+      [|1, 2, 3|]
+      ->Array.map(item => {<div key={j|$item|j}> item->React.int </div>});
+
+    act(() => {
+      ReactDOMRe.render(<div> array->React.array </div>, container)
+    });
+
+    expect.bool(
+      container
+      ->DOM.findBySelectorAndPartialTextContent("div", "1")
+      ->Option.isSome,
+    ).
+      toBeTrue();
+
+    expect.bool(
+      container
+      ->DOM.findBySelectorAndPartialTextContent("div", "2")
+      ->Option.isSome,
+    ).
+      toBeTrue();
+
+    expect.bool(
+      container
+      ->DOM.findBySelectorAndPartialTextContent("div", "3")
+      ->Option.isSome,
+    ).
+      toBeTrue();
+  });
+
+  test("can clone an element", ({expect}) => {
+    let container = getContainer(container);
+
+    act(() => {
+      ReactDOMRe.render(
+        React.cloneElement(
+          <div> "Hello"->React.string </div>,
+          {"data-name": "World"},
+        ),
+        container,
+      )
+    });
+
+    expect.bool(
+      container
+      ->DOM.findBySelectorAndPartialTextContent(
+          "div[data-name='World']",
+          "Hello",
+        )
+      ->Option.isSome,
+    ).
+      toBeTrue();
+  });
+
   test("can render react components", ({expect}) => {
     let container = getContainer(container);
 
@@ -202,4 +370,108 @@ describe("React", ({test, beforeEach, afterEach}) => {
       [|1|],
     |]);
   });
+
+  test("can work with React refs", ({expect}) => {
+    let reactRef = React.createRef();
+    expect.value(reactRef.current).toEqual(Js.Nullable.null);
+    reactRef.current = Js.Nullable.return(1);
+    expect.value(reactRef.current).toEqual(Js.Nullable.return(1));
+  });
+
+  test("can work with useRef", ({expect}) => {
+    let container = getContainer(container);
+    let myRef = ref(None);
+    let callback = reactRef => {
+      myRef := Some(reactRef);
+    };
+
+    act(() => {
+      ReactDOMRe.render(
+        <DummyComponentWithRefAndEffect callback />,
+        container,
+      )
+    });
+
+    expect.value(myRef.contents->Option.map(item => item.current)).toEqual(
+      Some(2),
+    );
+  });
+
+  test("Children", ({expect}) => {
+    let container = getContainer(container);
+
+    act(() => {
+      ReactDOMRe.render(
+        <DummyComponentThatMapsChildren>
+          <div> 1->React.int </div>
+          <div> 2->React.int </div>
+          <div> 3->React.int </div>
+        </DummyComponentThatMapsChildren>,
+        container,
+      )
+    });
+
+    expect.bool(
+      container
+      ->DOM.findBySelectorAndPartialTextContent("div[data-index='0']", "1")
+      ->Option.isSome,
+    ).
+      toBeTrue();
+
+    expect.bool(
+      container
+      ->DOM.findBySelectorAndPartialTextContent("div[data-index='1']", "2")
+      ->Option.isSome,
+    ).
+      toBeTrue();
+
+    expect.bool(
+      container
+      ->DOM.findBySelectorAndPartialTextContent("div[data-index='2']", "3")
+      ->Option.isSome,
+    ).
+      toBeTrue();
+  });
+
+  test("Context", ({expect}) => {
+    let container = getContainer(container);
+
+    act(() => {
+      ReactDOMRe.render(
+        <DummyContext.Provider value=10>
+          <DummyContext.Consumer />
+        </DummyContext.Provider>,
+        container,
+      )
+    });
+
+    expect.bool(
+      container
+      ->DOM.findBySelectorAndPartialTextContent("div", "10")
+      ->Option.isSome,
+    ).
+      toBeTrue();
+  });
+
+  test("Events", ({expect}) => {
+    let container = getContainer(container);
+    let value = ref("");
+
+    act(() => {
+      ReactDOMRe.render(
+        <input
+          name="test-input"
+          onChange={event => {value :=  event->ReactEvent.Form.target##value}}
+        />,
+        container,
+      )
+    });
+
+    switch (container->DOM.findBySelector("input[name='test-input']")) {
+    | Some(input) => input->Simulate.changeWithValue("My value")
+    | None => ()
+    };
+
+    expect.string(value.contents).toEqual("My value");
+  });
 });