Use a class for class based mock components

[k2snowman69]

Right now we force cast a function component to class component for class based systems. However if we need to implement a class based mock for some reason, the following code should be close. However I want to hold off on this until we get a bug that tells us we need to.

import { jest } from "@jest/globals";
import React from "react";

const map = new Map<any, jest.Mock<NonNullable<React.Component<any>["shouldComponentUpdate"]>>>();

type CreateMockClassComponentOptions = {
  elementType: string;
};

/**
 * Generates a new mock component with the prop signature provided.
 * @param options The different configuration options you wish to use
 * @returns
 */
export function createMockClassComponent<TProps>({
  elementType = "div",
}: CreateMockClassComponentOptions): typeof React.Component<TProps> {
  const mockShouldComponentUpdate = jest.fn((props: TProps) => {
    return true;
  });
  class MockComponent extends React.Component<TProps> {
    public static mockClear = () => {
      mockShouldComponentUpdate.mockClear();
    };
    componentDidMount(): void {
      mockShouldComponentUpdate(this.props);
    }
    shouldComponentUpdate = mockShouldComponentUpdate;
    render() {
      return React.createElement(elementType, this.props);
    }
  }

  map.set(MockComponent, mockShouldComponentUpdate);

  return MockComponent;
}

export function getMockClassComponentPropCalls<TProps>(mockComponent: typeof React.Component<TProps>): TProps[] {
  const mockShouldComponentUpdate = map.get(mockComponent);
  if (mockShouldComponentUpdate == null) {
    throw new Error("getMockClassComponentPropCalls requires createMockClassComponent to have been called");
  }
  const propCalls = mockShouldComponentUpdate.mock.calls.map((value) => {
    return value[0];
  });
  return propCalls;
}

[k2snowman69]

Oh and options should be updated too:

const defaultOptions: Required<Options> = {
  elementType: "div",
  componentType: "function",
};

export type Options = {
  /**
   * The HTMLElement type to render. Default is div.
   */
  elementType?: string;
  /**
   * The render style of the mock component to create. Default is function.
   */
  componentType?: "class" | "function";
};