Storybook에서 useParams 사용하기

Storybook-addon-react-router-v6 설치

storybook-addon-react-router-v6 패키지가 react-router 를 의존하기 때문에 react-router가 설치되어 있지 않다면 설치해줍니다.

$yarn add -D storybook-addon-react-router-v6
$yarn add react-router

스토리북 설정

// preview.tsx

import { withRouter } from 'storybook-addon-react-router-v6';

...
decorators: [
    Story => (
      <QueryClientProvider client={queryClient}>
        <ThemeProvider theme={theme}>
          <GlobalStyle />
          <Story />
        </ThemeProvider>
      </QueryClientProvider>
    ),
    mswDecorator, 
    withRouter, // withRouter를 추가한다.
  ],
...

스토리 파일 설정

// ReviewItem.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { reactRouterParameters } from 'storybook-addon-react-router-v6';

import ReviewItem from './ReviewItem';

const meta = {
  title: 'Review/ReviewItem',
  component: ReviewItem,
  tags: ['autodocs'],
  decorators: [
    Story => (
      <div style={{ width: 400, backgroundColor: 'white', padding: 20 }}>
        <Story />
      </div>
    ),
  ],
  parameters: { // 이 부분을 추가하면 된다.
    reactRouter: reactRouterParameters({
      location: {
        pathParams: { petFoodId: '1' },
      },
      routing: { path: '/pet-food/:petFoodId' },
    }),
  },
} satisfies Meta<typeof ReviewItem>;

export default meta;
type Story = StoryObj<typeof ReviewItem>;

export const Basic: Story = {
  args: {
    id: 1,
    reviewerName: '에디',
    rating: 4,
    date: '2023-05-26',
    comment: '우리집 강아지 사료',
    tastePreference: '정말 잘 먹어요',
    stoolCondition: '촉촉 말랑해요',
    adverseReactions: [],
  },
};

  parameters: {
    reactRouter: reactRouterParameters({
      location: {
        pathParams: { petFoodId: '1' },
      },
      routing: { path: '/pet-food/:petFoodId' },
    }),
  },

useParams를 사용해서 petFoodId를 가져오는 ReviewItem 컴포넌트의 경우

• location: 스토리에서 사용할 라우터의 경로 및 매개변수를 정의합니다.
  • pathParams: URL 경로에 사용할 매개변수를 정의합니다. 이 경우 petFoodId 를 1로 설정하였습니다.
• routing: React Router에서 사용하는 경로를 정의합니다. 이 경우 '/pet-food/:petFoodId' 경로를 사용하고 있습니다. :petFoodId 부분은 실제로 URL의 매개변수로 사용됩니다.

이렇게 정의된 reactRouter 매개변수는 스토리북 UI에서 해당 스토리를 실행할 때, 지정된 경로와 매개변수를 사용하여 React Router의 라우팅 로직을 시뮬레이션하고 테스트할 수 있게 해줍니다.

참고

https://storybook.js.org/addons/storybook-addon-react-router-v6