AstroとReactでブログを作るときにテストでちょっと詰まった点について

// 以下の定義は上記参考記事をコピーさせていただいています
import { z, defineCollection } from "astro:content"

// zodで各項目のバリデーションを設定
const blogCollection = defineCollection({
  schema: z.object({
    title: z.string().max(100).min(1), // titleは1文字以上100文字以下
    tags: z.array(z.string()).max(5).min(1), // タグは1つ以上5個まで
    date: z.string().regex(/^\d{4}-(0?[1-9]|1[0-2])-(0?[1-9]|[12]\d|3[01])$/), // yyyy-mm-dd形式
  }),
})

// `blog` という名前で上記のコレクション定義を登録
export const collections = {
  blog: blogCollection,
}

declare module "astro:content" {
  interface Render {
    ".md": Promise<{
      Content: import("astro").MarkdownInstance<{}>["Content"]
      headings: import("astro").MarkdownHeading[]
      remarkPluginFrontmatter: Record<string, any>
    }>
  }
}

import { getCollection } from "astro:content"

export async function getAllBlogs(): Promise<Blog[]> {
  const blogs = await getCollection("blog")
  const extracted = blogs.map((blog) => {
    const { slug, body } = blog
    const title = blog.data.title
    const tags = blog.data.tags
    const date = blog.data.date
    return { title, tags, date, slug, body, image: blog.data.image }
  })
  const sorted = extracted.sort(
    (a, z) => new Date(z.date).getTime() - new Date(a.date).getTime(),
  )
  return sorted
}

export default {
  "roots": [
    "<rootDir>/src"
  ],
  preset: "ts-jest",
  testEnvironment: "jest-environment-jsdom",
  testMatch: [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)"
  ],
  transform: {
    "^.+\\.tsx?$": "ts-jest"
  },
  // ここでモック用関数（モジュール）の場所を指定
  moduleNameMapper: {
    "^astro:content$": "<rootDir>/src/test/astroMock/content",
  },
};

export const getCollection = () => {
  // 6件のブログを返す
  return Promise.resolve([
    {
      id: "blog_with_cloudflare",
      slug: "blog_with_cloudflare",
      body: "みなさん始めまして。\nダイの大冒険は好きですか",
      collection: "blog",
      data: {
        title: "Cloudflare Pagesでブログを作ってみた",
        tags: ["Cloudflare", "Atro"],
        date: "2021-08-07",
        image: {
          url: "/blog/cloudflare.png",
          alt: "Cloudflare Pages",
        },
      },
// 省略

// astro:contentは動的に生成されるファイルなので,src/astroMock/contentをモックとして参照させている
// jest.config.jsを参照
describe("getAllBlogs", () => {
  it("should return all blogs", async () => {
    const allBlogCollections = await getAllBlogs()
    expect(allBlogCollections).toHaveLength(6)
  })
  it("should return all blogs sorted by date", async () => {
    const allBlogCollections = await getAllBlogs()
    const sorted = allBlogCollections.sort(
      (a, z) => new Date(z.date).getTime() - new Date(a.date).getTime(),
    )
    expect(allBlogCollections).toEqual(sorted)
  })
})

import 'tailwindcss/tailwind.css';
// 事前にaddonをnpmやyarnなどでインストールが必要
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

const preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    // ここでaddonを利用できるようにする
    viewport: {
      viewports: INITIAL_VIEWPORTS,
    },
  },
};

export default preview;

export const MobileView: Story = {
  args: {
    handleClick: action("Button Clicked!"),
    isOpen: false,
  },
  parameters: {
    // デフォルトのビューポートを指定
    viewport: {
      defaultViewport: "iphone6",
    },
  },
  // ここはStorybookのテストランナーによるテストを記載
  play: async ({ canvasElement, step }) => {
    const canvas = within(canvasElement)
    const button = await canvas.findByRole("button")
    await step("Button is Visible", () => {
      expect(button).toBeVisible()
    })
  },
}

const { getStoryContext } = require("@storybook/test-runner")
const { INITIAL_VIEWPORTS } = require("@storybook/addon-viewport")

const DEFAULT_VP_SIZE = { width: 1280, height: 720 }

module.exports = {
  async preRender(page, story) {
    const context = await getStoryContext(page, story)
    const vpName = context.parameters?.viewport?.defaultViewport
    const vpParams = INITIAL_VIEWPORTS[vpName]

    if (vpParams) {
      const vpSize = Object.entries(vpParams.styles).reduce(
        (acc, [screen, size]) => ({
          ...acc,
          [screen]: parseInt(size),
        }),
        {},
      )

      page.setViewportSize(vpSize)
    } else {
      page.setViewportSize(DEFAULT_VP_SIZE)
    }
  },
}

export const MobileView: Story = {
  args: {
    handleClick: action("Button Clicked!"),
    isOpen: false,
  },
  parameters: {
    viewport: {
      defaultViewport: "iphone6",
    },
  },
  play: async ({ canvasElement, step }) => {
    const canvas = within(canvasElement)
    const button = await canvas.findByRole("button")
    await step("Button is Visible", () => {
      // モバイルサイズの時には表示上見える
      expect(button).toBeVisible()
    })
  },
}

export const TabletView: Story = {
  args: {
    handleClick: action("Button Clicked!"),
    isOpen: false,
  },
  parameters: {
    viewport: {
      defaultViewport: "ipad",
    },
  },
  play: async ({ canvasElement, step }) => {
    const canvas = within(canvasElement)
    const button = canvas.queryByRole("button")
    await step("Button can not find", () => {
      // タブレットサイズになると見えない
      expect(button).toBeNull()
    })
  },
}