test: remove vitest globals

test/client/ColumnsPhotoAlbum.spec.tsx

@@ -1,3 +1,5 @@
+import { describe, expect, it } from "vitest";
+
 import { ColumnsPhotoAlbum } from "../../src";
 import { render, renderAndMatchSnapshot } from "../test-utils";
 import photos from "../photos";

test/client/MasonryPhotoAlbum.spec.tsx

@@ -1,3 +1,5 @@
+import { describe, expect, it } from "vitest";
+
 import { ColumnsPhotoAlbum, MasonryPhotoAlbum } from "../../src";
 import { render, renderAndMatchSnapshot } from "../test-utils";
 import photos from "../photos";

test/client/PhotoAlbum.spec.tsx

@@ -1,3 +1,5 @@
+import { describe, expect, it, vi } from "vitest";
+
 import PhotoAlbum from "../../src";
 import { render, renderAndMatchSnapshot } from "../test-utils";
 import photos from "../photos";

test/client/RowsPhotoAlbum.spec.tsx

@@ -1,3 +1,5 @@
+import { describe, expect, it } from "vitest";
+
 import { RowsPhotoAlbum } from "../../src";
 import { render, renderAndMatchSnapshot } from "../test-utils";
 import photos from "../photos";

test/core/heap.spec.ts

@@ -1,3 +1,5 @@
+import { describe, expect, it } from "vitest";
+
 import MinHeap, { rankingFunctionComparator } from "../../src/layouts/rows/heap";
 
 const NumericComparator = rankingFunctionComparator<number>((x) => x);

test/scroll/InfiniteScroll.spec.tsx

@@ -1,10 +1,12 @@
+import { describe, expect, it, vi } from "vitest";
+
 import { MasonryPhotoAlbum, RowsPhotoAlbum } from "../../src";
 import { UnstableInfiniteScroll as InfiniteScroll } from "../../src/scroll";
 import { act, fireEvent, render } from "../test-utils";
 import photos from "../photos";
 
 async function triggerIntersection() {
-  await act(() => fireEvent(window, new Event("intersect")));
+  await act(async () => fireEvent(window, new Event("intersect")));
 }
 
 function fetcher(index: number) {
@@ -22,12 +24,10 @@ describe("InfiniteScroll", () => {
   });
 
   it("loads photos asynchronously", async () => {
-    const { getPhotos, queryByText } = await act(async () =>
-      render(
-        <InfiniteScroll fetch={fetcher} finished="Done">
-          <RowsPhotoAlbum photos={[]} />
-        </InfiniteScroll>,
-      ),
+    const { getPhotos, queryByText } = render(
+      <InfiniteScroll fetch={fetcher} finished="Done">
+        <RowsPhotoAlbum photos={[]} />
+      </InfiniteScroll>,
     );
     expect(getPhotos().length).toBe(0);
 
@@ -43,8 +43,8 @@ describe("InfiniteScroll", () => {
   it("handles fetch errors", async () => {
     vi.useFakeTimers();
 
-    const { queryByText } = await act(async () =>
-      render(
+    try {
+      const { queryByText } = render(
         <InfiniteScroll
           fetch={() => {
             throw new Error();
@@ -54,16 +54,16 @@ describe("InfiniteScroll", () => {
         >
           <RowsPhotoAlbum photos={[]} />
         </InfiniteScroll>,
-      ),
-    );
-
-    await triggerIntersection();
-    await triggerIntersection();
-    await triggerIntersection();
-    await act(vi.runAllTimers);
-    expect(queryByText("Error")).toBeTruthy();
-
-    vi.useRealTimers();
+      );
+
+      await triggerIntersection();
+      await triggerIntersection();
+      await triggerIntersection();
+      await act(async () => vi.runAllTimers());
+      expect(queryByText("Error")).toBeTruthy();
+    } finally {
+      vi.useRealTimers();
+    }
   });
 
   it("unloads offscreen photos", async () => {

test/server/ServerPhotoAlbum.spec.tsx

@@ -1,3 +1,5 @@
+import { describe, expect, it } from "vitest";
+
 import { LayoutType } from "../../src";
 import { UnstableServerPhotoAlbum as ServerPhotoAlbum } from "../../src/server";
 import { render } from "../test-utils";

test/ssr/SSR.spec.tsx

@@ -1,3 +1,5 @@
+import { describe, expect, it } from "vitest";
+
 import { RowsPhotoAlbum } from "../../src";
 import { UnstableSSR as SSR } from "../../src/ssr";
 import { render } from "../test-utils";

test/test-utils.ts

@@ -1,5 +1,8 @@
 import type React from "react";
-import { act, render, RenderOptions } from "@testing-library/react";
+import { expect } from "vitest";
+import { render as originalRender, RenderOptions } from "@testing-library/react";
+
+export * from "@testing-library/react";
 
 function getPhotos(container: HTMLElement) {
   return container.querySelectorAll(".react-photo-album--photo") as NodeListOf<HTMLElement>;
@@ -20,8 +23,8 @@ function getContainerWidth(container: HTMLElement) {
   return cw ? Number.parseInt(cw, 10) : undefined;
 }
 
-function customRender(ui: React.ReactElement, options?: RenderOptions) {
-  const { container, ...rest } = render(ui, options);
+export function render(ui: React.ReactElement, options?: RenderOptions) {
+  const { container, ...rest } = originalRender(ui, options);
 
   return {
     container,
@@ -34,34 +37,5 @@ function customRender(ui: React.ReactElement, options?: RenderOptions) {
 }
 
 export function renderAndMatchSnapshot(ui: React.ReactElement, options?: RenderOptions) {
-  expect(customRender(ui, options).asFragment()).toMatchSnapshot();
+  expect(render(ui, options).asFragment()).toMatchSnapshot();
 }
-
-export function mockObserver<MockEntry extends {}>(event: string, mockEntry?: () => MockEntry) {
-  return vi.fn().mockImplementation((callback) => {
-    const targets: Element[] = [];
-
-    const listener = () => {
-      act(() => {
-        callback(targets.map((target) => ({ target, ...mockEntry?.() })));
-      });
-    };
-
-    window.addEventListener(event, listener);
-
-    return {
-      observe: (target: Element) => {
-        targets.push(target);
-      },
-      unobserve: (target: Element) => {
-        targets.splice(targets.indexOf(target), 1);
-      },
-      disconnect: () => {
-        window.removeEventListener(event, listener);
-      },
-    };
-  });
-}
-
-export * from "@testing-library/react";
-export { customRender as render };

test/vitest.setup.ts

@@ -1,6 +1,7 @@
 import "@testing-library/jest-dom/vitest";
+import { afterEach, beforeEach, vi } from "vitest";
 
-import { act, cleanup, fireEvent, mockObserver } from "./test-utils";
+import { act, cleanup, fireEvent } from "./test-utils";
 
 declare global {
   interface Window {
@@ -43,6 +44,32 @@ window.resizeTo = (width: number, height: number) => {
   });
 };
 
+function mockObserver<MockEntry extends {}>(event: string, mockEntry?: () => MockEntry) {
+  return vi.fn().mockImplementation((callback) => {
+    const targets: Element[] = [];
+
+    const listener = () => {
+      act(() => {
+        callback(targets.map((target) => ({ target, ...mockEntry?.() })));
+      });
+    };
+
+    window.addEventListener(event, listener);
+
+    return {
+      observe: (target: Element) => {
+        targets.push(target);
+      },
+      unobserve: (target: Element) => {
+        targets.splice(targets.indexOf(target), 1);
+      },
+      disconnect: () => {
+        window.removeEventListener(event, listener);
+      },
+    };
+  });
+}
+
 global.ResizeObserver = mockObserver("resize");
 
 global.IntersectionObserver = mockObserver("intersect", () => ({ isIntersecting: window.isIntersecting }));

tsconfig.json

@@ -13,7 +13,6 @@
     "stripInternal": true,
     "isolatedModules": true,
     "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "types": ["vitest/globals"]
+    "forceConsistentCasingInFileNames": true
   }
 }

vite.config.ts

@@ -8,7 +8,6 @@ import cleanup from "rollup-plugin-cleanup";
 export default defineConfig({
   test: {
     dir: "test",
-    globals: true,
     environment: "jsdom",
     setupFiles: "./test/vitest.setup.ts",
     coverage: {