Fixed React warnings/errors about custom property names (#20)

Author: k2snowman69

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.0.2] - 2023-01-13
+
+- Fixed React console logging errors and warnings for properties it doesn't recognize as default HTML attributes
+
 ## [0.0.1] - 2023-01-06
 
 - Fixed ReturnType causing typescript compiile issues with createMockComponent

package-lock.json

@@ -74,5 +74,5 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "0.0.1"
+  "version": "0.0.2"
 }

package.json

@@ -15,7 +15,6 @@ export type Options = {
 /**
  * Generates a new mock component with the prop signature provided.
  *
- * @param {string} elementType the HTMLElement type to render. Default is div.
  * @returns A mock component to be used in conjunction with other utilities in this library
  */
 export function createMockComponent<TProps>(options?: Options): jest.Mocked<React.ComponentType<TProps>> {
@@ -27,14 +26,16 @@ export function createMockComponent<TProps>(options?: Options): jest.Mocked<Reac
   // Our implementation renders all components (class and function) as function components
   // so forcing the type to function here
   return jest.fn((props: TProps) => {
-    if (props == null) {
-      return React.createElement(elementType);
-    } else if (typeof props === "object" && "children" in props) {
-      const { children, ...rest } = props as React.PropsWithChildren<TProps>;
-      return React.createElement(elementType, rest, children);
-    } else {
-      return React.createElement(elementType, props);
-    }
+    const propsWithReactHack = {
+      ...props,
+      // All the react checks seem to be based off a function isCustomComponent
+      // - Uses of isCustomComponent https://github.com/facebook/react/search?q=isCustomComponent&type=code
+      // - Function itself https://github.com/facebook/react/blob/8e2bde6f2751aa6335f3cef488c05c3ea08e074a/packages/react-dom-bindings/src/shared/isCustomComponent.js
+      // By providing "props.is" we can bypass the property checks all together
+      is: elementType,
+    };
+
+    return React.createElement(elementType, propsWithReactHack);
   });
 }
 

src/index.ts

@@ -1,6 +1,11 @@
 import React, { HtmlHTMLAttributes } from "react";
 
-export type ChildProps = React.PropsWithChildren<Pick<HtmlHTMLAttributes<HTMLButtonElement>, "onClick">>;
+export type ChildProps = React.PropsWithChildren<
+  Pick<HtmlHTMLAttributes<HTMLButtonElement>, "onClick"> & {
+    someData: string;
+    onPointerEnter: () => void;
+  }
+>;
 
 export class Child extends React.Component<ChildProps> {
   render() {

src/tests-class-component/child-with-children/test-asset.child.tsx

@@ -36,7 +36,12 @@ export class Parent extends React.Component<ParentProps, ParentState> {
         <div>
           Click count is <span data-testid={parentTestIdMap.clickCount}>{clickCount}</span>
         </div>
-        <Child data-testid={parentTestIdMap.child} onClick={this.handleChildClick}>
+        <Child
+          data-testid={parentTestIdMap.child}
+          onClick={this.handleChildClick}
+          someData="someData"
+          onPointerEnter={() => {}}
+        >
           Increment
         </Child>
       </div>

src/tests-class-component/child-with-children/test-asset.parent.tsx

@@ -40,7 +40,7 @@ describe("Github issue #7 - Using ReturnType on createMockComponent", () => {
   it("Renders dynamic import child", async () => {
     // Arrange
     const spy = jest.fn();
-    const result = render(<Child onClick={spy} />);
+    const result = render(<Child onClick={spy} someData="someData" onPointerEnter={() => {}} />);
 
     // Act
     await userEvent.click(result.getByRole("button"));

src/tests-class-component/child-with-props/index.test.tsx

@@ -1,6 +1,9 @@
 import React, { HtmlHTMLAttributes } from "react";
 
-export type ChildProps = Pick<HtmlHTMLAttributes<HTMLButtonElement>, "onClick">;
+export type ChildProps = Pick<HtmlHTMLAttributes<HTMLButtonElement>, "onClick"> & {
+  someData: string;
+  onPointerEnter: () => void;
+};
 
 export class Child extends React.Component<ChildProps> {
   render() {

src/tests-class-component/child-with-props/test-asset.child.tsx

@@ -36,7 +36,12 @@ export class Parent extends React.Component<ParentProps, ParentState> {
         <div>
           Click count is <span data-testid={parentTestIdMap.clickCount}>{clickCount}</span>
         </div>
-        <Child data-testid={parentTestIdMap.child} onClick={this.handleChildClick} />
+        <Child
+          data-testid={parentTestIdMap.child}
+          onClick={this.handleChildClick}
+          someData="someData"
+          onPointerEnter={() => {}}
+        />
       </div>
     );
   }

src/tests-class-component/child-with-props/test-asset.parent.tsx

@@ -1,6 +1,11 @@
 import React, { HtmlHTMLAttributes } from "react";
 
-export type ChildProps = React.PropsWithChildren<Pick<HtmlHTMLAttributes<HTMLButtonElement>, "onClick">>;
+export type ChildProps = React.PropsWithChildren<
+  Pick<HtmlHTMLAttributes<HTMLButtonElement>, "onClick"> & {
+    someData: string;
+    onPointerEnter: () => void;
+  }
+>;
 
 export function Child(props: ChildProps) {
   const { onClick, children } = props;