Storybook 스토리를 다시 렌더링하기 위해 `key` 소품 활용

Storybook (SB) , react-query (RQ) 및 Mock Service Worker (MSW) 을 결합하는 방법에 대해 상당히 많이 썼습니다(아래 관련 게시물 참조). 나는 마침내 더 나은 개발자 경험을 위해 퍼즐의 또 다른 조각을 풀었습니다. 즉, MSW의 응답에 영향을 미치는 SB의 컨트롤을 변경한 후 RQ 쿼리를 다시 가져오도록 강제하는 것입니다.

많은 경우에 내가 쓰는 이야기는 컨트롤/인수만 활용하여 MSW에서 처리하는 모의 응답의 결과에 영향을 미칩니다. 이로 인해 소품이 변경되지 않았기 때문에 스토리 내에서 컨트롤을 변경해도 UI가 업데이트되지 않습니다. 다른 상태를 보여주기 위해 구성이 다른args 별도의 스토리를 작성할 것입니다.

예를 들어,

export type Args = ChecklistsSummaryProps & {
  isLoading: boolean;
  isEmpty: boolean;
  bigNumbers: boolean;
  avgCompletionMinutes: number;
};

// ...

const Template: SB.StoryObj<Args> = {
  render: _args => <ChecklistsSummary />,
};

export const Default: typeof Template = {
  ...Template,
};

export const Loading: typeof Template = {
  ...Template,
  args: { isLoading: true },
};

export const Empty: typeof Template = {
  ...Template,
  args: { isEmpty: true },
};

export const BigNumbers: typeof Template = {
  ...Template,
  args: { bigNumbers: true },
};

약간 지루하지만 결국 SB의 testing-react 애드온의 composeStories와 함께 매우 선언적이고 설명적입니다.

그러나 우리가 잘 알고 좋아하는 SB 컨트롤의 멋지고 빠른 피드백을 원하는 경우 구성 요소의 key 속성을 활용하여 구성 요소를 강제로 새로 고치고 모든 쿼리를 다시 실행할 수 있습니다.

const Template: SB.StoryObj<Args> = {
  render: args => <ChecklistsSummary key={JSON.stringify(args)} />,
};

데모!

스토리 통합: Mock Service Worker로 Storybook 향상

Mike Schutte ・ 2021년 4월 28일 ・ 5분 읽기

#mockserviceworker #storybook #react #javascript

Storybook 기반 Jest 테스트에서 고유한 queryClient에 액세스

Mike Schutte ・ 12월 13일 '21 ・ 5분 읽기

#react #storybook #testing #javascript

Storybook 기반 Jest 테스트에서 고유한 queryClient에 액세스

Mike Schutte ・ 12월 13일 '21 ・ 5분 읽기

#react #storybook #testing #javascript