인터페이스와 Zod 스키마로 TypeScript 픽스처를 생성하는 도구를 만들었습니다

출처: Dev.to

모든 TypeScript 프로젝트는 같은 지점에 도달합니다: 타입을 정의했으니 이제 테스트, Storybook 스토리, 혹은 로컬 개발을 위한 mock 데이터가 필요합니다. mockUser, mockProduct, mockOrder 같은 보일러플레이트 객체를 손수 반복해서 작성하게 됩니다.

FixtureKit은 인터페이스, 타입, 혹은 Zod 스키마로부터 TypeScript fixture를 브라우저에서 직접 생성합니다.

사용해 보기

https://fixture-kit.vercel.app

입력

interface Product {
  id: string;
  name: string;
  price: number;
  inStock: boolean;
  tags: string[];
}

출력

export const mockProduct: Product = {
  id: "f47ac10b-58cc-4372-a567-0e02b2c3d479",
  name: "Wireless Keyboard",
  price: 49.99,
  inStock: true,
  tags: ["electronics", "accessories"],
};

특징

• 결정론적 출력 – 필드명 + fixture 인덱스의 해시를 사용합니다; Math.random()을 사용하지 않으며, 같은 스키마는 언제나 동일한 fixture를 생성합니다. 커밋해도 안전합니다.
• eval도, 백엔드도 없음 – Zod 스키마는 커스텀 재귀 하강 파서로, TypeScript 스키마는 TypeScript 컴파일러 API로 파싱합니다. 모든 작업이 클라이언트 측에서 이루어집니다.
• 다중 fixture – 한 번에 최대 5개의 fixture를 생성할 수 있어 UI 컴포넌트 시드나 테이블/리스트 테스트 케이스에 유용합니다.

지원 입력

• Zod: z.object, z.string, z.number, z.boolean, z.array, z.enum, z.union, z.literal, .optional(), .nullable(), 중첩 z.object
• TypeScript: 인터페이스와 타입 별칭 (TypeScript 컴파일러 API를 통해 파싱)

제네릭, 유틸리티 타입, .refine, .transform 등 고급 기능은 범위에 포함되지 않으며 명확한 오류를 반환합니다.

기술 스택

• 소스:
• 피드백을 환영합니다. 특히 아직 지원되지 않는 스키마 형태에 대한 의견을 기다립니다.