feat: add prepTestComponent (#255)

* feat: add prepTestComponent

This function handles creating and mounting React component. It then
returns a DOM element with the mounted component, so that tests can
inspect it.

* refactor: always use globalThis

Author: ojeytonwilliams

.babelrc

@@ -1,11 +1,14 @@
 {
   "presets": [
     "@babel/preset-typescript",
-    ["@babel/preset-env", {
-      "targets": {
-        "node": "current"
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
       }
-    }]
-    
+    ],
+    ["@babel/preset-react", { "runtime": "automatic" }]
   ]
-}
+}

docs/curriculum-helpers.md

@@ -66,3 +66,13 @@ let regEx = functionRegex("myFunc", ["arg1"], { capture: true });
 let match = "myFunc = arg1 => arg1; console.log();\n // captured, unfortunately".match(regEx);
 match[1] // "myFunc = arg1 => arg1; console.log();\n // captured, unfortunately"
 ```
+
+## prepTestComponent
+
+Renders a React component into a DOM element and returns a Promise containing the DOM element. The arguments are, respectively, the component to render and an (optional) object containing the props to pass to the component.
+
+```javascript
+import { SomeComponent } from "./SomeComponent";
+const element = await prepTestComponent(SomeComponent, { someProp: "someValue" });
+element.querySelector("h1").textContent === "Some Value";
+```

lib/__tests__/curriculum-helper.test.ts lib/__tests__/curriculum-helper.test.tsxlib/__tests__/curriculum-helper.test.ts renamed to lib/__tests__/curriculum-helper.test.tsx

@@ -1,3 +1,6 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
 import cssTestValues from "../__fixtures__/curriculum-helper-css";
 import htmlTestValues from "../__fixtures__/curriculum-helpers-html";
 import jsTestValues from "../__fixtures__/curriculum-helpers-javascript";
@@ -392,3 +395,51 @@ describe("functionRegex", () => {
     expect(code.match(funcRE)![0]).toBe("const naomi = (love) => ");
   });
 });
+
+describe("prepTestComponent", () => {
+  let MyComponent;
+  beforeEach(() => {
+    MyComponent = (props) => <main>{props.text}</main>;
+
+    globalThis.React = React;
+    globalThis.ReactDOM = ReactDOM;
+  });
+
+  afterEach(() => {
+    delete globalThis.React;
+    delete globalThis.ReactDOM;
+    jest.restoreAllMocks();
+  });
+
+  it("should return an HTML element", async () => {
+    const { prepTestComponent } = helper;
+
+    const el = await prepTestComponent(MyComponent);
+
+    expect(el).toBeInstanceOf(HTMLElement);
+  });
+
+  it("should render a component", async () => {
+    const { prepTestComponent } = helper;
+
+    const el = await prepTestComponent(MyComponent);
+
+    expect(el.innerHTML).toBe("<main></main>");
+  });
+
+  it("should render a component with props", async () => {
+    const { prepTestComponent } = helper;
+
+    const el = await prepTestComponent(MyComponent, { text: "Hello" });
+
+    expect(el.innerHTML).toBe("<main>Hello</main>");
+  });
+
+  it("should not log any errors to the console", async () => {
+    const { prepTestComponent } = helper;
+    const spy = jest.spyOn(console, "error").mockImplementation();
+
+    await prepTestComponent(MyComponent);
+    expect(spy).not.toHaveBeenCalled();
+  });
+});

lib/index.ts

@@ -1,6 +1,11 @@
 import { strip } from "./strip";
 import astHelpers from "../python/py_helpers.py";
 
+declare global {
+  // eslint-disable-next-line no-var
+  var IS_REACT_ACT_ENVIRONMENT: boolean;
+}
+
 /**
  * The `RandomMocker` class provides functionality to mock and restore the global `Math.random` function.
  * It replaces the default random number generator with a deterministic pseudo-random number generator.
@@ -177,6 +182,23 @@ const getIsDeclaredAfter = (styleRule: CSSStyleRule) => (selector: string) => {
   return currPosition > prevPosition;
 };
 
+export async function prepTestComponent(
+  component: unknown,
+  props?: Record<string, unknown>
+) {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+  const testDiv = document.createElement("div");
+  // @ts-expect-error the React version is determined at runtime so we can't define the types here
+  const createdElement = globalThis.React?.createElement(component, props);
+
+  // @ts-expect-error or here
+  await globalThis.React?.act(async () => {
+    // @ts-expect-error Same for ReactDOM as for React
+    globalThis.ReactDOM?.createRoot(testDiv).render(createdElement);
+  });
+  return testDiv;
+}
+
 export const python = {
   astHelpers,
   getDef(code: string, functionName: string) {