Task 컴포넌트

// types.ts
export type TaskData = {
  id: string;
  title: string;
  state: "TASK_ARCHIVED" | "TASK_INBOX" | "TASK_PINNED";
};

// Task.tsx
type TaskProps = {
  task: TaskData;
  onArchiveTask: (id: string) => void;
  onPinTask: (id: string) => void;
};

export default function Task({
  task: { id, title, state },
  onArchiveTask,
  onPinTask,
}: TaskProps) {
  return (
  //...

살펴보면 Task 컴포넌트는 task 객체와 이벤트 핸들러들을 부모로부터 주입받고 있는간단한 UI 컴포넌트임을 알 수 있다.

스토리 파일

meta

import type { Meta, StoryObj } from '@storybook/react-vite';
import { fn } from 'storybook/test';
import Task from './Task';

export const ActionsData = {
  onArchiveTask: fn(),
  onPinTask: fn(),
};

const meta = {
  component: Task,
  title: 'Task',
  tags: ['autodocs'],
  //👇 Our exports that end in "Data" are not stories.
  excludeStories: /.*Data$/,
  args: {
    ...ActionsData,
  },
} satisfies Meta<typeof Task>;

export default meta;

테스트할 컴포넌트의 메타데이터를 담고 있는 객체다.

• title : 스토리북을 실행했을 때 이 보이는 이 컴포넌트의 이름
• args : 모든 테스트 케이스(스토리)에 공통적으로 필요한 매개변수들. ActionData라는 스파이 함수를 통해 필수 prop의 자리를 대신 하고 있는것을 볼 수 있다.