bkdragon's log

Portal을 사용해서 렌더링하는 컴포넌트는 play 함수의 canvasElement 내에 없기 때문에 찾을 수 없다. 따라서 @storybook/test에서 제공하는 screen을 사용해줘야 한다.import { expect, screen, waitFor, fireEvent, fn } from "@storybook/test";export const Default: Story = { name: "모달 창 기본", args: { onClose: fn(), isOpen: true, }, play: async ({ args, _ }) => { await waitFor(() => { expect(screen.getByTestId("..

storybook 의 play 함수를 사용하면 스토리가 렌더링 된 이후 사용자 상호작용을 시뮬레이션할 수 있다.설정play 함수를 사용하기 위해서는 스토리북 설정 파일에서 interactions 플러그인울 추가해야한다.npm install @storybook/test @storybook/addon-interactions --save-dev// .storybook/main.jsmodule.exports = { stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], addons: ["@storybook/addon-interactions"],};방법사용자 상호작용 시뮬레이션의 전반적인 과정을 먼저 살펴보고 예제 코드..

공식문서에서는 Decorator 는 Story 을 감싸는 것이라고 설명한다.Decorator 를 사용하면 레이아웃을 잡거나 Story 에서 특정 컨텍스트를 공유하게 하는 것이 가능하다.zustand 전역 상태가 불필요하게 모든 Story가 아닌 특정 story 내에서만 유지되게 해보자.export const Default: Story = { name: "Default", parameters: { withZustand : true },};parameters 에 withZustand 라는 임의의 키를 추가하고 true 값을 설정해줬다.import { useEffect } from "react";import { useStore } from "@/hooks/useStore";impo..

Storybook 은 페이지와 UI 컴포넌트를 독립적으로 테스트 할 수 있는 라이브러리이다. 개발중인 컴포넌트의 모습을 전체 앱을 실행하지 않아도 확인할 수 있다. 디자이너와 개발자, 개발자와 개발자의 협업에 큰 도움이 된다.최근 회사에서 공통으로 사용될 표준 컴포넌트와 유용한 훅스를 개발중인데 이것을 github packages 에 배포하고 컴포넌트는 Storybook과 Chromatic을 통해 배포해서 공유했다.주요 개념StoryStorybook 에서는 Story 라고하는 개념을 사용한다. 이는 컴포넌트의 렌더링된 상태를 캡쳐한 것이다.컴포넌트는 다양한 Props를 가질 수 있다. Props 에 따라 모양이 변하거나 사용법이 달라질 수 있다. 하나의 컴포넌트에 여러 Story가 존재할 수 있고 이것들..