Added mockComponent util

Author: viktor-podzigun

README.md

@@ -24,32 +24,36 @@ import React from "react";
 import TestRenderer from "react-test-renderer";
 
 // 1. import
-import { assertComponents } from "react-assert";
+import { assertComponents, mockComponent } from "react-assert";
+
+function SubComponent() {
+  return <p className="sub">Sub</p>;
+}
+SubComponent.displayName = "SubComponent";
 
 function MyComponent(props) {
+  const { SubComp } = MyComponent;
+
   return (
     <div>
-      <SubComponent />
+      <SubComp />
       <p className="my">{props.text}</p>
     </div>
   );
 }
 MyComponent.displayName = "MyComponent";
-
-function SubComponent() {
-  return <p className="sub">Sub</p>;
-}
+MyComponent.SubComp = SubComponent;
 
 describe("MyComponent", () => {
-  it("should render component", () => {
+  it("should render nested components", () => {
     //given
     const text = "Hello";
 
     //when
     const result = TestRenderer.create(<MyComponent text={text} />).root;
 
     //then
-    // 2. call it with result.children and expected components tree
+    // 2. call assertComponents to check expected components tree
     assertComponents(
       result.children,
       <div>
@@ -58,5 +62,25 @@ describe("MyComponent", () => {
       </div>
     );
   });
+
+  it("should render mock components", () => {
+    //given
+    // 3. use mockComponent to mock nested components
+    MyComponent.SubComp = mockComponent(SubComponent);
+    const { SubComp } = MyComponent;
+    const text = "Hello";
+
+    //when
+    const result = TestRenderer.create(<MyComponent text={text} />).root;
+
+    //then
+    assertComponents(
+      result.children,
+      <div>
+        <SubComp />
+        <p className="my">{text}</p>
+      </div>
+    );
+  });
 });
 ```

index.d.ts

@@ -10,3 +10,7 @@ export function assertComponents(
   results: (TestRenderer.ReactTestInstance | string)[],
   ...expectedElements: (React.ReactElement | string)[]
 ): void;
+
+export function mockComponent<
+  T = React.FunctionComponent<any> | React.ComponentClass<any>
+>(comp: T, name?: string): T;

index.mjs

@@ -1,2 +1,3 @@
 export { default as assertComponent } from "./src/assertComponent.mjs";
 export { default as assertComponents } from "./src/assertComponents.mjs";
+export { default as mockComponent } from "./src/mockComponent.mjs";

src/mockComponent.mjs

@@ -0,0 +1,15 @@
+import React from "react";
+
+/**
+ * @template {React.FunctionComponent<any> | React.ComponentClass<any>} T
+ * @param {T} comp
+ * @param {string} [name]
+ * @returns {T}
+ */
+function mockComponent(comp, name) {
+  const mock = name || `${comp.displayName || ""}Mock`;
+  // @ts-ignore
+  return mock;
+}
+
+export default mockComponent;

test/all.mjs

@@ -1,3 +1,4 @@
 await import("./testRenderer.test.mjs");
 await import("./assertComponent.test.mjs");
 await import("./assertComponents.test.mjs");
+await import("./mockComponent.test.mjs");

test/example.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import TestRenderer from "react-test-renderer";
-import { assertComponents } from "../index.mjs";
+import { assertComponents, mockComponent } from "../index.mjs";
 
 const { describe, it } = await (async () => {
   // @ts-ignore
@@ -9,23 +9,27 @@ const { describe, it } = await (async () => {
     : import("node:test");
 })();
 
+function SubComponent() {
+  return <p className="sub">Sub</p>;
+}
+SubComponent.displayName = "SubComponent";
+
 // @ts-ignore
 function MyComponent(props) {
+  const { SubComp } = MyComponent;
+
   return (
     <div>
-      <SubComponent />
+      <SubComp />
       <p className="my">{props.text}</p>
     </div>
   );
 }
 MyComponent.displayName = "MyComponent";
-
-function SubComponent() {
-  return <p className="sub">Sub</p>;
-}
+MyComponent.SubComp = SubComponent;
 
 describe("MyComponent", () => {
-  it("should render component", () => {
+  it("should render nested components", () => {
     //given
     const text = "Hello";
 
@@ -41,4 +45,23 @@ describe("MyComponent", () => {
       </div>
     );
   });
+
+  it("should render mock components", () => {
+    //given
+    MyComponent.SubComp = mockComponent(SubComponent);
+    const { SubComp } = MyComponent;
+    const text = "Hello";
+
+    //when
+    const result = TestRenderer.create(<MyComponent text={text} />).root;
+
+    //then
+    assertComponents(
+      result.children,
+      <div>
+        <SubComp />
+        <p className="my">{text}</p>
+      </div>
+    );
+  });
 });

test/mockComponent.test.mjs

@@ -0,0 +1,34 @@
+import React from "react";
+import assert from "node:assert/strict";
+import { mockComponent } from "../index.mjs";
+import { TestComp } from "./testComponents.mjs";
+
+const { describe, it } = await (async () => {
+  // @ts-ignore
+  return process.isBun // @ts-ignore
+    ? Promise.resolve({ describe: (_, fn) => fn(), it: test })
+    : import("node:test");
+})();
+
+const h = React.createElement;
+
+const Comp = () => {
+  return h(React.Fragment, null, "test_text", h("div"), h(TestComp));
+};
+
+describe("mockComponent.test.mjs", () => {
+  it("should return generic Mock string", () => {
+    //when & then
+    assert.deepEqual(mockComponent(Comp), "Mock");
+  });
+
+  it("should return provided name", () => {
+    //when & then
+    assert.deepEqual(mockComponent(Comp, "MyMock"), "MyMock");
+  });
+
+  it("should return component's displayName + Mock", () => {
+    //when & then
+    assert.deepEqual(mockComponent(TestComp), "TestCompMock");
+  });
+});