Storybook으로 Next.js RSC 테스트하기

export default async function Component() {
  const dbRes = db.query("SELECT * FROM example");
  const apiRes = await fetch("/api/example");
 
  return (
    ...
  )
}

pnpm dlx storybook@next init

const config: StorybookConfig = {
  // stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  stories: ['../app/**/*.stories.tsx'],
  // ... 기존 설정들
  features: { experimentalRSC: true }
  staticDirs: [
    "../public",
    // 이 블로그에선 next.js localfont를 사용하여서 따로 추가해줬습니다.
    {
      from: "../public/fonts",
      to: "/public/fonts",
    }
  ],
  webpackFinal: async (config) => {
    if(!config.resolve) return config;
 
    config.resolve.alias = {
      ...config.resolve.alias,
      "@": path.resolve(__dirname, "../src"),
      "contentlayer/generated": path.resolve(__dirname, "../.contentlayer/generated"),
    }
    
    return config;
  },
}

import { Meta, StoryObj } from "@storybook/react";
import { allPosts } from "contentlayer/generated";
 
import Layout from "../Layout";
import PostPage from "./PostPage";
 
const meta = {
  title: "pages/PostPage",
  component: PostPage,
} satisfies Meta<typeof PostPage>;
export default meta;
 
type Story = StoryObj<typeof meta>;
 
const post = allPosts.find((post) => post.slug === "/__test/mdx-example");
 
if(!post) {
  throw new Error("No post found");
}
 
export const Default: Story = {
  args: post,
};

import type { Preview } from "@storybook/react";
import Providers from "../src/components/Provider";
import * as React from "react";
 
import "@/app/globals.css";
import "./font-face.css";
 
const preview: Preview = {
  parameters: {
    nextjs: {
      appDirectory: true,
    },
  },
  decorators: [
    (Story) => (
      <Providers>
        <Story />
      </Providers>
    ),
  ]
};
 
export default preview;

const config = {
  darkMode: ["class"],
  content: [
    "./src/**/*.{ts,tsx}",
    "./storybook/**/*.{ts,tsx}",
  ],
  // ... 기타 설정
}

pnpm add -D msw@2.0.0
pnpm dlx storybook add msw-storybook-addon@2.0.0--canary.122.b3ed3b1.0
pnpm dlx msw init <PUBLIC_DIR>

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.tsx'],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
    "msw-storybook-addon"
  ],
  // ... 기타 설정
}

import { initialize, mswLoader } from "msw-storybook-addon";
 
initialize({onUnhandledRequest: "bypass"}); // handle 등록되지 않은 요청을 통과시킵니다.
 
const preview: Preview = {
  loaders: [mswLoader],
  // ... 기타 설정
};

import { http, HttpResponse } from "msw";
import { OgObject } from "open-graph-scraper/dist/lib/types";
 
const MOCK_OG_OBJECT: OgObject = {
  // MOCK DATA
};
 
// Next.js API 를 사용하고 있기에, Next.js DEV 서버 API URL을 사용합니다.
function nextApi(url: string) {
  return `http://localhost:3000/api${url}`;
}
 
function searchParam(url: string, param: string) {
  const urlObj = new URL(url);
  return urlObj.searchParams.get(param);
}
 
 
export const handlers = [
  http.get<OpenGraphReq, any, OgObject>(
    nextApi("/open-graph"),
    async ({ request}) => {
 
      const url = searchParam(request.url, "url");
      
      if( url === "https://example.com/error")
        return HttpResponse.json({}, { status: 503 });
      else if( url === "pending")
        return new Promise(() => {});
 
 
      return HttpResponse.json(MOCK_OG_OBJECT);
    }
  ),
];

import { Meta, StoryObj } from "@storybook/react";
 
import { handlers } from "@/mocks/handlers";
 
import LinkedCard from "./linked-card";
 
const meta = {
  title: "ui/LinkedCard",
  component: LinkedCard,
  parameters: {
    layout: "centered",
    msw: {
      handlers,
    },
  },
  decorators: [
    (Story) => (
      <div className="w-[600px]">
        <Story />
      </div>
    ),
  ],
} satisfies Meta<typeof LinkedCard>;
export default meta;
 
type Story = StoryObj<typeof meta>;
 
export const Default: Story = {
  args: {
    title: "Title Example",
    href: "https://www.example.com",
  },
};

export const Default: Story = {
  args: {
    value: "Copy String",
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
 
    // Click Event
    const button = canvas.getByRole("button");
    userEvent.click(button);
    await canvas.findByText("복사되었습니다.");
 
    // Clipboard
    expect(await navigator.clipboard.readText()).toBe("Copy String");
  },
};