Added actAsync util

Author: viktor-podzigun

README.md

@@ -28,6 +28,7 @@ import assert from "node:assert/strict";
 import mockFunction from "mock-fn";
 
 import {
+  actAsync,
   assertComponents,
   mockComponent,
   TestErrorBoundary,
@@ -98,6 +99,32 @@ describe("MyComponent", () => {
     );
   });
 
+  it("should render without warnings using actAsync", async () => {
+    //given
+    const Comp1 = mockComponent(TestComp);
+    const Comp2 = mockComponent(TestComp2);
+    const Comp = () => {
+      const [_, setState] = useState(0);
+      useLayoutEffect(() => {
+        Promise.resolve().then(() => {
+          setState(123);
+        });
+      }, []);
+
+      return h(Comp1, {}, h("div"), h(Comp2));
+    };
+
+    //when
+    const result = (
+      await actAsync(() => {
+        return TestRenderer.create(h(Comp));
+      })
+    ).root;
+
+    //then
+    assertComponents(result.children, h(Comp1, {}, h("div"), h(Comp2)));
+  });
+
   it("should render error details if error during render", () => {
     //given
     // suppress intended error

index.d.mts

@@ -15,6 +15,8 @@ export function mockComponent<
   T = React.FunctionComponent<any> | React.ComponentClass<any>
 >(comp: T, name?: string): T;
 
+export function actAsync<T>(callback: () => T): Promise<T>;
+
 interface State {
   error?: object;
 }

index.mjs

@@ -1,4 +1,5 @@
 export { default as assertComponent } from "./src/assertComponent.mjs";
 export { default as assertComponents } from "./src/assertComponents.mjs";
 export { default as mockComponent } from "./src/mockComponent.mjs";
+export { actAsync } from "./src/utils.mjs";
 export { default as TestErrorBoundary } from "./src/TestErrorBoundary.mjs";

src/utils.mjs

@@ -0,0 +1,18 @@
+import TestRenderer from "react-test-renderer";
+
+/**
+ * @template T
+ * @param {() => T} callback
+ * @returns {Promise<T>}
+ */
+export async function actAsync(callback) {
+  /** @type {T} */
+  let result;
+
+  await TestRenderer.act(async () => {
+    result = callback();
+  });
+
+  //@ts-ignore
+  return result;
+}

test/assertComponents.test.mjs

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useLayoutEffect, useState } from "react";
 import TestRenderer from "react-test-renderer";
 import assert from "node:assert/strict";
-import { assertComponents } from "../index.mjs";
+import { actAsync, assertComponents, mockComponent } from "../index.mjs";
 import { TestComp, TestComp2 } from "./testComponents.mjs";
 
 const { describe, it } = await (async () => {
@@ -63,4 +63,52 @@ describe("assertComponents.test.mjs", () => {
         "\n\texpected: TestComp2"
     );
   });
+
+  it("should not fail if components match", () => {
+    //given
+    const Comp1 = mockComponent(TestComp);
+    const Comp2 = mockComponent(TestComp2);
+    const Comp = () => {
+      return h(Comp1, {}, h("div"), h(Comp2));
+    };
+    const comp = TestRenderer.create(h(Comp)).root;
+    /** @type {Error?} */
+    let resError = null;
+
+    //when
+    try {
+      assertComponents(comp.children, h(Comp1, {}, h("div"), h(Comp2)));
+    } catch (error) {
+      resError = error;
+    }
+
+    //then
+    assert.deepEqual(resError, null);
+  });
+
+  it("should not fail if components match async", async () => {
+    //given
+    const Comp1 = mockComponent(TestComp);
+    const Comp2 = mockComponent(TestComp2);
+    const Comp = () => {
+      const [_, setState] = useState(0);
+      useLayoutEffect(() => {
+        Promise.resolve().then(() => {
+          setState(123);
+        });
+      }, []);
+
+      return h(Comp1, {}, h("div"), h(Comp2));
+    };
+
+    //when
+    const result = (
+      await actAsync(() => {
+        return TestRenderer.create(h(Comp));
+      })
+    ).root;
+
+    //then
+    assertComponents(result.children, h(Comp1, {}, h("div"), h(Comp2)));
+  });
 });