How to test file via visual testing.

setup.ts

import "@testing-library/jest-dom";

import { setProjectAnnotations } from "@storybook/react";
import "jest-styled-components";

import { decorators } from "../../.storybook/withEditor";

setProjectAnnotations({ decorators });

snapshot.test.tsx

import type { Meta, StoryFn } from "@storybook/react";
import { composeStories } from "@storybook/react";
import { render } from "@testing-library/react";
import { toMatchImageSnapshot } from "jest-image-snapshot";
import { chromium, type Browser, type Page } from "playwright";
import { afterAll, beforeAll, describe, expect, it } from "vitest";

expect.extend({ toMatchImageSnapshot });

interface StoryFile {
  default: Meta
  [name: string]: StoryFn | Meta
}

let browser: Browser;
let page: Page;

beforeAll(async () => {
  browser = await chromium.launch();
  page = await browser.newPage();
});

afterAll(async () => {
  await browser.close();
});

const stories = await Promise.all<StoryFile>(
  Object.values(import.meta.glob<StoryFile>("./components/**/*.stories.tsx")).map(m => m()),
);

it.each(
  stories
    .reduce((acc, i) => [...acc, ...Object.values(composeStories(i))], [] as StoryFn[])
    .map(i => [String(i.parameters?.__id), i]),
)("%s", (_, Story) => {
  const { container } = render(<Story />);
  expect(container).toMatchSnapshot();
});

describe("visual testing", async () => {
  const snaps = (await Promise.all(
    Object.values(import.meta.glob("./__snapshots__/*.snap") || {}).map(m => m()),
  )).map((i: any) => {
    return i.default;
  }).reduce((acc, i) => {
    return { ...acc, ...i };
  }, {});

  const snapKeys = Object.keys(snaps);

  if (snapKeys.length === 0) {
    return it.skip("");
  }

  it.each(snapKeys.map((snapKey) => {
    return [snapKey];
  }))("%s", async (snapKey) => {
    const storyID = String(snapKey).replace(/\s/g, "_");
    const snapContent = snaps[snapKey];
    const splitIndex = String(snapContent).indexOf("<div>");
    const styles = `<style>${String(snapContent).slice(0, splitIndex)}</style>`;
    const content = `<div style="display:inline-block;" id="${storyID}">${String(snapContent).slice(splitIndex)}</div>`;
    const html = `${styles}${content}`;

    await page.setContent(html);
    await page.waitForSelector(`#${storyID}`, { state: "visible" });
    const target = (await page.$$(`#${storyID}`))[0];
    const demission = await target.boundingBox();
    const { x, y, width, height } = demission!;
    const screenshot = await page.screenshot({ clip: { x, y, width, height } });
    expect(screenshot).toMatchImageSnapshot({ customSnapshotIdentifier: storyID });
  });
});

vite.config.ts

import { withBaseConfig } from "../../vite.base.config";

export default withBaseConfig(__dirname)({
  build: {
    target: "es2020",
    rollupOptions: {
      external: ["@craftjs/core"],
    },
  },
  resolve: {
    alias: {
      "@": "/src",
    },
  },
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/tests/setup.ts",
    coverage: {
      reporter: ["text", "json", "html"],
    },
    cache: false,
  },
});