Storybook에서 Controls 패널 상태와 페이지의 상태를 연결하는 방법

스토리북에서 페이지의 상태와 Controls의 상태가 연결되지 않아서 UI 테스팅 시에 불편함을 느끼는 경우가 있습니다.

이런 경우에 상태를 통일하여 테스트를 진행할 수 있게 스토리북에서는 useArgs라는 hook을 제공합니다.

import { useArgs } from '@storybook/preview-api';

사용방법

preview-api 패키지에서 useArgs hook을 가져옵니다.
이제 해당 훅에서 반환하는 상태를 컴포넌트에 전달하고, 상태를 변경하는 함수를 정의합니다.

const Template: StoryFn<typeof ToastPopup> = (args) => {
  // useArgs hook 사용
  const [{ isOpen }, setArgsState] = useArgs();
  // useArgs에서 반환하는 상태 변경 함수 정의
  const openToastPopup = () => setArgsState({ isOpen: true });
  const closeToastPopup = () => setArgsState({ isOpen: false });

  return (
    <>
      {/* useArgs의 상태를 변경하는 함수 실행 */}
      <button onClick={openToastPopup}>토스트 팝업 열기</button>
      <ToastPopup
        isOpen={isOpen} // 컴포넌트에 상태 전달
        onDismiss={closeToastPopup} // useArgs의 상태를 변경하는 함수 실행
        {...args}
      />
    </>
  );
};

type Story = StoryObj<typeof ToastPopup>;

export const Default: Story = Template.bind({});
Default.args = {
  isOpen: false,
  content: (
    <>
      토스트메세지입니다.
      <br /> 3초 내로 읽힐 수 있는 문구 작성 권장
    </>
  ),
};

useArgs hook은 컴포넌트의 prop에 전달되는 값을 객체 형태의 상태로 반환합니다.

반환되는 상태를 업데이트 하면 Controls 패널의 상태와 컴포넌트의 상태를 통일하여 보여줄 수 있습니다.

결과