Update to Decorator that it acts as FC

src/support/testing/testComponent.tsx

@@ -59,7 +59,7 @@ export type Decorator<
    * @param settings settings to apply on the decoration
    * @returns an updated JSX structure
    */
-  decorator: (Component: React.FC, settings: TSettings) => JSX.Element;
+  Decorator: React.FC<{ Component: React.FC; settings: TSettings }>;
 };
 
 const hasAlreadyRendered = (
@@ -71,7 +71,10 @@ const hasAlreadyRendered = (
   document.body.firstChild === lastRender.baseElement.firstChild;
 
 /**
- * Set the component subject of this test
+ * Set the component subject of this test.
+ *
+ * This component should be a FunctionalComponent. If you want
+ * to test a ClassComponent, you can wrap your component with `makeFC`
  *
  * @example ```
  * const { renderComponent } = setComponent(YourComponent)
@@ -128,8 +131,12 @@ export const setComponent = <
       }
 
       const jsxStructure = (settings.decorators ?? []).reduce(
-        (result, dec) =>
-          dec.decorator(() => result, decoratorSettings[dec.name]),
+        (result, dec) => (
+          <dec.Decorator
+            Component={() => result}
+            settings={decoratorSettings[dec.name]}
+          />
+        ),
         <Component {...initialProps} {...props} />,
       );
 
@@ -173,6 +180,11 @@ export const setComponent = <
   };
 };
 
+/**
+ * Convert a ClassComponent into a FunctionalComponent.
+ * The ref that can be supplied will be a ref to the instance of the
+ * ClassComponent.
+ */
 export const makeFC = <TComponentProps,>(
   Component: React.ComponentClass<TComponentProps>,
 ): React.ForwardRefExoticComponent<

src/support/testing/testDecorators.tsx

@@ -7,7 +7,7 @@ import { Context as ResponsiveContext } from "react-responsive";
 export const responsiveDecorator: Decorator<"responsive", { width: number }> = {
   name: "responsive",
   settings: { width: 1200 },
-  decorator: (Component, settings) => (
+  Decorator: ({ Component, settings }) => (
     <ResponsiveContext.Provider value={{ width: settings.width }}>
       <Component />
     </ResponsiveContext.Provider>
@@ -23,7 +23,7 @@ export const dataDecorator = <TSerialized extends object>(
 > => ({
   name: "application",
   settings: { useTypeName: true, mocks, cache },
-  decorator: (Component, settings) => (
+  Decorator: ({ Component, settings }) => (
     <MockedProvider
       mocks={settings.mocks}
       addTypename={settings.useTypeName}
@@ -42,7 +42,7 @@ export const routingDecorator = (): Decorator<
   settings: {
     paths: {},
   },
-  decorator: (Component, settings) => (
+  Decorator: ({ Component, settings }) => (
     <MemoryRouter>
       <Component />
       {Object.entries(settings.paths).map(([path, content]) => (
@@ -57,7 +57,7 @@ export const routingDecorator = (): Decorator<
 export const tableDecorator: Decorator<"table", Record<string, unknown>> = {
   name: "table",
   settings: {},
-  decorator: (Component) => (
+  Decorator: ({ Component }) => (
     <table>
       <tbody>
         <Component />