Merge pull request #4 from snowcoders/support-class-components

Added class component support

Author: k2snowman69

CHANGELOG.md

@@ -7,4 +7,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.0.0] - 2022-12-31
+
 - Initial release

README.md

@@ -4,15 +4,20 @@ Simple utiltiies to help with mocking React scenarios for testing.
 
 ## Usage
 
-The best option is to check out our [unit tests](./src/functional-component/index.test.tsx) to see different uses however here's a quick code snippet.
+The best option is to check out our [integration tests](./src/tests-functional-component/child-with-props/index.test.tsx) to see more real world scenarios.
 
 ```typescript
-// Step 1: if using typescript, import the Props for the child component
+import { render } from "@testing-library/react";
+import React from "react";
+import { it, jest } from "@jest/globals";
+import { createMockComponent, getMockComponentPropCalls } from "../../index.js";
+
+// Step 1: if using typescript, import the Prop types for the child component
 import type { ChildProps } from "./test-asset.child.js";
 
 // Step 2: Now mock the child component
 jest.unstable_mockModule("./test-asset.child.js", () => ({
-  Child: createMockFunctionComponent<ChildProps>("button"),
+  Child: createMockComponent<ChildProps>("button"),
 }));
 
 // Step 3: Import the parent and child, mocking the child
@@ -24,9 +29,27 @@ afterEach(() => {
 });
 
 // Step 4: Write your test
-it("Mock child callback causes click count to increase", async () => {
-  // Act
+it("Child callback causes click count to increase", async () => {
+  // Arrange
+  const result = render(<Parent />);
+
+  // Act - Fires the onComplicatedCallback for the last render cycle
+  await act(() =>
+    getMockComponentPropCalls(Child)
+      ?.at(-1)
+      ?.onClick?.({} as any)
+  );
+
+  // Assert
+  const countElement = result.getByTestId("click-count");
+  expect(countElement.innerHTML).toBe("1");
+});
+
+it("Clicking child causes click count to increase", async () => {
+  // Arrange
   const result = render(<Parent />);
+
+  // Act
   await userEvent.click(result.getByRole("button"));
 
   // Assert
@@ -46,9 +69,7 @@ There's two halves to this problem:
    - Does your runtime environment support this? Node started [support](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#browser_compatibility) in 14.8.0.
    - If using typescript, is your `module` set to [ES2022](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-5.html#module-es2022) or later?
 
-## Goals
-
-### Why mock?
+## Purpose
 
 Unfortunately there exist scenarios where you may not want to render a child component; for example when that child component is delay loaded, complex, unstable, server driven, or not owned by you directly and is already covered by integration or end to end testing scenarios.
 
@@ -62,6 +83,8 @@ To create a full integration test for this scenario would be extremely complex,
 
 Instead of constantly being on the backfoot and your CI breaking because another company updated their systems, mocking those dependencies provides a level of stability at the sacrifice of real world resemblance.
 
+## Goals
+
 ### Dependencies
 
 This project's goal is to have only two dependencies: React and Jest. This way it can be utilized by any React testing system (e.g. @testing-library/react, react-test-renderer, or other) and not tie you down to a specific testing system.

src/functional-component/child-with-children/index.test.tsx

@@ -0,0 +1,76 @@
+// This file contains some basic tests, for the integration tests see `tests-class-component` and `tests-function-component`
+
+import { describe, it, jest } from "@jest/globals";
+import { render } from "@testing-library/react";
+import { createMockComponent, getMockComponentPropCalls } from "./index.js";
+import React from "react";
+import "@testing-library/jest-dom";
+
+describe("createMockComponent", () => {
+  it("returns without any parameters", () => {
+    // Arrange
+    const result = createMockComponent();
+
+    // Assert
+    expect(result).toBeDefined();
+  });
+
+  it("returns with empty options", () => {
+    // Arrange
+    const result = createMockComponent({});
+
+    // Assert
+    expect(result).toBeDefined();
+  });
+
+  it("returns with custom elementType", () => {
+    // Arrange
+    const result = createMockComponent({ elementType: "custom" });
+
+    // Assert
+    expect(result).toBeDefined();
+  });
+});
+
+describe("getMockComponentPropCalls", () => {
+  describe("Success scenarios", () => {
+    it("has 0 calls if not rendered", () => {
+      // Arrange
+      const result = createMockComponent();
+
+      // Assert
+      const calls = getMockComponentPropCalls(result);
+      expect(calls).toHaveLength(0);
+    });
+
+    it("has 1 call if rendered", () => {
+      // Arrange
+      const result = createMockComponent();
+
+      // Act
+      render(React.createElement(result));
+
+      // Assert
+      const calls = getMockComponentPropCalls(result);
+      expect(calls).toHaveLength(1);
+    });
+  });
+
+  describe("Negative tests", () => {
+    it("throws an error if passed nothing", () => {
+      expect(() => {
+        // @ts-expect-error I'm testing a negative scenario here so I need to break typescript a bit
+        getMockComponentPropCalls();
+      }).toThrowError("Did you forget to call createMockComponent");
+    });
+
+    it("throws an error if passed a real component", () => {
+      expect(() => {
+        getMockComponentPropCalls(
+          // @ts-expect-error I'm testing a negative scenario here so I need to break typescript a bit
+          () => React.createElement("span")
+        );
+      }).toThrowError("Did you forget to call createMockComponent");
+    });
+  });
+});

src/functional-component/index.ts

@@ -1,19 +1,59 @@
-import { createMockFunctionComponent, getMockFunctionComponentPropCalls } from "./functional-component/index.js";
+import React from "react";
+import { jest } from "@jest/globals";
+
+const defaultOptions: Required<Options> = {
+  elementType: "div",
+};
+
+export type Options = {
+  /**
+   * The HTMLElement type to render. Default is div.
+   */
+  elementType?: string;
+};
 
 /**
  * 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>(
-  mockComponent: Parameters<typeof createMockFunctionComponent<TProps>>[0]
-): ReturnType<typeof createMockFunctionComponent<TProps>> {
-  return createMockFunctionComponent(mockComponent);
+export function createMockComponent<TProps>(options?: Options) {
+  const { elementType } = {
+    ...defaultOptions,
+    ...options,
+  };
+
+  // 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);
+    }
+  });
 }
 
 export function getMockComponentPropCalls<TProps>(
-  mockComponent: Parameters<typeof getMockFunctionComponentPropCalls<TProps>>[0]
-): ReturnType<typeof getMockFunctionComponentPropCalls<TProps>> {
-  return getMockFunctionComponentPropCalls(mockComponent);
+  mockComponent:
+    | jest.MockedFunction<React.FC<TProps>> // Function components
+    | typeof React.Component<TProps> // Class components
+): Readonly<TProps>[] {
+  // Our implementation renders all components (class and function) as function components
+  // so forcing the type to function here
+  const castedMockComponent = mockComponent as jest.MockedFunction<React.FC<TProps>>;
+  const calls = castedMockComponent?.mock?.calls;
+  if (calls == null) {
+    throw new Error(
+      "Parameter to getMockComponentPropCalls must be a MockComponent. Did you forget to call createMockComponent?"
+    );
+  }
+  const propCalls = calls.map((value) => {
+    return value[0];
+  });
+  return propCalls;
 }