chore: add astro testing library (#691)

packages/astro/test/astro-testing-library.ts

@@ -0,0 +1,44 @@
+import {
+  experimental_AstroContainer as AstroContainer,
+  type ContainerRenderOptions,
+} from "astro/container";
+import { getQueriesForElement, prettyDOM, queries } from "@testing-library/dom";
+import type { BoundFunctions, prettyFormat } from "@testing-library/dom";
+import { JSDOM } from "jsdom";
+import type { AstroComponentFactory } from "astro/runtime/server/index.js";
+export type DebugFn = (
+  baseElement?: HTMLElement | HTMLElement[],
+  maxLength?: number,
+  options?: prettyFormat.OptionsReceived,
+) => void;
+
+export type Result = BoundFunctions<typeof queries> & {
+  asFragment: () => string;
+  baseElement: HTMLElement;
+  debug: DebugFn;
+};
+
+let container: AstroContainer;
+
+export async function render(
+  component: AstroComponentFactory,
+  options?: Omit<ContainerRenderOptions, "routeType">,
+): Promise<Result> {
+  if (!container) {
+    container = await AstroContainer.create();
+  }
+  const html = await container.renderToString(component, options);
+  const dom = new JSDOM(html);
+  const element = dom.window.document.body;
+  const queryHelpers = getQueriesForElement(element);
+
+  return {
+    ...queryHelpers,
+    asFragment: () => element.innerHTML,
+    baseElement: element,
+    debug: (el = element, maxLength, options) =>
+      Array.isArray(el)
+        ? el.forEach((e) => console.log(prettyDOM(e, maxLength, options)))
+        : console.log(prettyDOM(el, maxLength, options)),
+  };
+}

packages/astro/test/astro.test.ts

@@ -1,47 +1,31 @@
-// @vitest-environment node
-import { describe, test, expect, beforeAll } from "vitest";
-import { experimental_AstroContainer as AstroContainer } from "astro/container";
+import { describe, test, expect } from "vitest";
 import { Image } from "../index.js";
 import PictureTestWrapper from "./PictureTestWrapper.astro";
-import { getByAltText, getByTestId } from "@testing-library/dom";
-import { JSDOM } from "jsdom";
-
+import { render } from "./astro-testing-library.js";
 import {
   expectImagePropsToMatchTransformed,
   expectSourcePropsToMatchTransformed,
   imgTestCases,
   sourceTestCases,
 } from "../../../test/test-helpers.js";
 
-let container: AstroContainer;
-
 describe("the Astro component", () => {
-  beforeAll(async () => {
-    container = await AstroContainer.create();
-  });
   for (const props of imgTestCases) {
     test(`renders a ${props.layout} image`, async () => {
-      const html = await container.renderToString(Image, { props });
-      const dom = new JSDOM(html);
-      const img = getByAltText<HTMLImageElement>(
-        dom.window.document as unknown as HTMLElement,
-        props.alt,
-      );
+      const { getByAltText } = await render(Image, {
+        props,
+      });
+      const img = getByAltText<HTMLImageElement>(props.alt);
       expect(img).toBeTruthy();
       expectImagePropsToMatchTransformed(img, props);
     });
   }
   for (const props of sourceTestCases) {
     test(`renders a picture with ${props.layout} source`, async () => {
-      const html = await container.renderToString(PictureTestWrapper, {
+      const { getByTestId } = await render(PictureTestWrapper, {
         props,
       });
-      const dom = new JSDOM(html);
-
-      const source = getByTestId<HTMLSourceElement>(
-        dom.window.document as unknown as HTMLElement,
-        "testimg",
-      );
+      const source = getByTestId<HTMLSourceElement>("testimg");
       expect(source).toBeTruthy();
       expectSourcePropsToMatchTransformed(source, props);
     });

test/test-helpers.ts

@@ -1,10 +1,10 @@
 import {
-  CoreImageAttributes,
-  CoreSourceAttributes,
   transformProps,
   transformSourceProps,
-  UnpicImageProps,
-  UnpicSourceProps,
+  type CoreImageAttributes,
+  type CoreSourceAttributes,
+  type UnpicImageProps,
+  type UnpicSourceProps,
 } from "@unpic/core";
 import { expect } from "vitest";