chore: upgrade to vitest@4

Author: igordanchenko

package-lock.json

@@ -81,9 +81,9 @@
     "@types/dom-view-transitions": "^1.0.6",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
-    "@vitejs/plugin-react": "^4.7.0",
-    "@vitest/coverage-v8": "^3.2.4",
-    "@vitest/ui": "^3.0.5",
+    "@vitejs/plugin-react": "^5.1.0",
+    "@vitest/coverage-v8": "^4.0.7",
+    "@vitest/ui": "^4",
     "autoprefixer": "^10.4.21",
     "cssnano": "^7.1.2",
     "eslint": "^9.39.1",
@@ -111,7 +111,7 @@
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.3",
     "vite": "^7.2.0",
-    "vitest": "^3.0.5"
+    "vitest": "^4"
   },
   "keywords": [
     "react",

package.json

@@ -35,7 +35,7 @@ export default function Controller({ setIndex, children }: ControllerProps) {
 
     const close = () => {
       Promise.all(exitHooks.current.map((hook) => hook()))
-        .catch(() => {})
+        .catch(/* v8 ignore next - @preserve */ () => {})
         .then(() => {
           exitHooks.current = [];
           setIndex(-1);

src/components/Controller.tsx

@@ -94,7 +94,7 @@ export default function useSensors() {
           Array.from(
             carouselRef.current?.parentElement?.querySelectorAll(
               `.${cssClass("toolbar")}, .${cssClass("selectable")}`,
-            ) /* c8 ignore start */ || [] /* c8 ignore stop */,
+            ) || [],
           ).find((element) => element.contains(event.target as Element)) !== undefined));
 
     const onPointerDown = (event: PointerEvent) => {

src/components/useSensors.ts

@@ -9,6 +9,7 @@ import {
   clickButtonPrev,
   expectCurrentSlideToBe,
   expectLightboxToBeClosed,
+  expectLightboxToBeOpen,
   expectToBeZoomedIn,
   expectToBeZoomedOut,
   getCloseButton,
@@ -19,7 +20,6 @@ import {
   getPreviousButton,
   getSlidesCount,
   pointerSwipe,
-  pointerZoom,
   querySelector,
   querySelectorAll,
   renderLightbox,
@@ -110,6 +110,18 @@ describe("Lightbox", () => {
     });
   });
 
+  it("supports wheel navigation threshold", async () => {
+    renderLightbox();
+
+    await withFakeTimers(async () => {
+      wheelSwipe(10, 0, 0);
+      wheelSwipe(10, 0, 100);
+      wheelSwipe(10, 0, 200);
+    });
+
+    expectCurrentSlideToBe(0);
+  });
+
   it("supports wheel cooldown", async () => {
     renderLightbox();
 
@@ -126,6 +138,9 @@ describe("Lightbox", () => {
 
     renderLightbox();
 
+    await pointerSwipe(user, getCurrentSlideImage(), 0, -10);
+    await expectLightboxToBeOpen();
+
     await pointerSwipe(user, getCurrentSlide(), 0, -120);
     await expectLightboxToBeClosed();
   });
@@ -151,16 +166,6 @@ describe("Lightbox", () => {
     await expectLightboxToBeClosed();
   });
 
-  it("cancels multi-touch gestures", async () => {
-    const user = userEvent.setup();
-
-    renderLightbox();
-    expectCurrentSlideToBe(0);
-
-    await pointerZoom(user, getCurrentSlide());
-    expectCurrentSlideToBe(0);
-  });
-
   it("supports render functions", () => {
     renderLightbox({
       render: {
@@ -196,13 +201,25 @@ describe("Lightbox", () => {
   it("supports responsive images", () => {
     renderLightbox({
       slides: [
-        { ...slides[0], srcSet: [{ src: "srcset", width: 800, height: 1200 }] },
-        { ...slides[1], srcSet: [{ src: "srcset", width: 1200, height: 800 }] },
+        {
+          ...slides[0],
+          srcSet: [
+            { src: "src1", width: 800, height: 1200 },
+            { src: "src2", width: 1600, height: 2400 },
+          ],
+        },
+        {
+          ...slides[1],
+          srcSet: [
+            { src: "src3", width: 1200, height: 800 },
+            { src: "src4", width: 600, height: 400 },
+          ],
+        },
       ],
     });
 
-    expect(querySelector('img[srcset="srcset 800w"]')).toBeInTheDocument();
-    expect(querySelector('img[srcset="srcset 1200w"]')).toBeInTheDocument();
+    expect(querySelector('img[srcset="src1 800w, src2 1600w"]')).toBeInTheDocument();
+    expect(querySelector('img[srcset="src4 600w, src3 1200w"]')).toBeInTheDocument();
   });
 
   it("supports view transitions", () => {
@@ -396,6 +413,48 @@ describe("Lightbox", () => {
     expectToBeZoomedOut();
   });
 
+  it("ignores unsupported zoom gestures", async () => {
+    const user = userEvent.setup();
+
+    renderLightbox();
+
+    const target = getCurrentSlide();
+
+    await user.pointer([
+      { keys: "[TouchA>]", target, coords: { x: 100, y: 100 } },
+      { keys: "[TouchB>]", target, coords: { x: 200, y: 200 } },
+      { keys: "[TouchC>]", target, coords: { x: 300, y: 300 } },
+      { pointerName: "TouchA", target, coords: { x: 50, y: 50 } },
+      { keys: "[/TouchA][/TouchB][/TouchC]", target },
+    ]);
+    expectToBeZoomedOut();
+
+    await user.pointer([
+      { keys: "[TouchA>]", target, coords: { x: 100, y: 100 } },
+      { keys: "[TouchB>]", target, coords: { x: 200, y: 200 } },
+      { pointerName: "TouchA", target, coords: { x: 300, y: 300 } },
+      { keys: "[/TouchA][/TouchB]", target },
+    ]);
+    expectToBeZoomedOut();
+
+    await user.pointer([
+      { keys: "[TouchA>]", target, coords: { x: 100, y: 100 } },
+      { keys: "[TouchB>]", target, coords: { x: 200, y: 200 } },
+      { pointerName: "TouchA", target, coords: { x: 50, y: 50 } },
+      { keys: "[/TouchA][/TouchB]", target },
+    ]);
+    expectToBeZoomedIn();
+
+    await user.pointer([
+      { keys: "[TouchA>]", target, coords: { x: 50, y: 50 } },
+      { keys: "[TouchB>]", target, coords: { x: 200, y: 200 } },
+      { keys: "[TouchC>]", target, coords: { x: 300, y: 300 } },
+      { pointerName: "TouchA", target, coords: { x: 100, y: 100 } },
+      { keys: "[/TouchA][/TouchB][/TouchC]", target },
+    ]);
+    expectToBeZoomedIn();
+  });
+
   it("supports double-click zoom", async () => {
     const user = userEvent.setup();
 

test/Lightbox.spec.tsx

@@ -90,15 +90,6 @@ export async function pointerSwipe(user: UserEvent, target: Element, deltaX: num
   ]);
 }
 
-export async function pointerZoom(user: UserEvent, target: Element) {
-  await user.pointer([
-    { keys: "[TouchA>]", target, coords: { x: 0, y: 0 } },
-    { keys: "[TouchB>]", target, coords: { x: 0, y: 0 } },
-    { keys: "[/TouchB]", target, coords: { x: 100, y: 100 } },
-    { keys: "[/TouchA]", target, coords: { x: -100, y: -100 } },
-  ]);
-}
-
 export function wheelSwipe(deltaX: number, deltaY: number, delay = 2_000) {
   act(() => {
     vi.setSystemTime(Date.now() + delay);
@@ -122,6 +113,10 @@ export function renderLightbox(props?: Omit<Partial<LightboxProps>, "index" | "s
   return render(<LightboxTest slides={slides} {...props} />);
 }
 
+export async function expectLightboxToBeOpen() {
+  expectCurrentSlideToBe(0);
+}
+
 export async function expectLightboxToBeClosed() {
   await act(async () => {
     fireEvent.transitionEnd(getController());

test/test-utils.tsx

@@ -18,11 +18,21 @@ afterEach(() => {
 
 vi.stubGlobal(
   "ResizeObserver",
-  vi.fn((callback) => ({
-    observe: vi.fn(callback),
-    unobserve: vi.fn(),
-    disconnect: vi.fn(),
-  })),
+  class implements ResizeObserver {
+    callback: ResizeObserverCallback;
+
+    constructor(callback: ResizeObserverCallback) {
+      this.callback = callback;
+    }
+
+    observe() {
+      this.callback([], this);
+    }
+
+    unobserve() {}
+
+    disconnect() {}
+  },
 );
 
 function isCarousel(target: unknown) {

test/vitest.setup.ts

@@ -1,21 +1,17 @@
-/// <reference types="vitest" />
+/// <reference types="vitest/config" />
 
 import { defineConfig } from "vite";
 
 export default defineConfig({
   test: {
     dir: "test",
     environment: "jsdom",
+    setupFiles: ["./test/vitest.setup.ts"],
     coverage: {
-      all: true,
       enabled: true,
-      include: ["src"],
       thresholds: { "100": true },
-      reporter: [
-        ["text", { skipEmpty: true }],
-        ["html", { skipEmpty: true }],
-      ],
+      include: ["src/**/**.{ts,tsx}"],
+      exclude: ["src/**/index.ts", "src/types.ts", "src/**/**.d.ts"],
     },
-    setupFiles: ["./test/vitest.setup.ts"],
   },
 });