component.test.tsx

import { type ReactRenderer, composeStories } from "@storybook/react";
import type { Store_CSFExports, PreparedStoryFn } from "@storybook/types";
import { render } from "@testing-library/react";
import { glob } from "glob";

import preview from "../.storybook/preview";

import { setProjectAnnotations } from "@storybook/react";
import { join } from "path";

setProjectAnnotations(preview);

let storiesFiles: [
  path: string,
  stories: ReturnType<
    typeof composeStories<Store_CSFExports<ReactRenderer, any>>
  >,
][];

beforeAll(async () => {
  console.log(storiesFiles);

  const storiesFilePaths = await glob("../**/*.stories.tsx", {
    ignore: ["node_modules/**", "submodules/**"],
    cwd: __dirname,
  });

  storiesFiles = await Promise.all(
    storiesFilePaths.flatMap(async (path) => [
      path,
      composeStories(
        (await import(join(__dirname, path))) as Store_CSFExports<
          ReactRenderer,
          any
        >,
      ),
    ]),
  );

  console.log(storiesFiles);

  return;
});

describe("全ての Story の play function をテスト", () => {
  console.log(storiesFiles);
  test("全ての Story の play function をテスト", async () => {
    await Promise.all(
      storiesFiles.flatMap(([_, composedStories]) =>
        Object.values(composedStories).map(async (composedStory) => {
          const Component = composedStory as PreparedStoryFn<
            ReactRenderer,
            unknown
          >;

          const screen = render(<Component />);

          await Component.play?.({
            canvasElement: screen.container,
          });
        }),
      ),
    );
  });
});