인프런 커뮤니티 질문&답변

작성한 질문수

실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트

3.2. 스토리 작성하기

storybook/ addon react-router-dom

작성

// package.json
npm list로 확인 결과
react-router@7.13.1
storybook-addon-remix-react-router@6.1.0
react@19.2.4
storybook@10.2.17

강의에 있는 내용을 토대로 typescript로 쇼핑몰 storybook 테스트를 진행 중에 React Router pannel에 로깅이 찍히지 않습니다.

github, storybook docs

참고하면서 해봐도 해결이 되지를 않는데...

제 코드는 아래와 같습니다.

.storybook/main.ts

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@chromatic-com/storybook",
    "@storybook/addon-vitest",
    "@storybook/addon-a11y",
    "@storybook/addon-docs",
    "storybook-addon-remix-react-router",
  ],
  framework: "@storybook/react-vite",
};
export default config;

.storybook/preview.tsx

import type { Preview } from "@storybook/react-vite";
import { withRouter } from "storybook-addon-remix-react-router";
const preview: Preview = {
  tags: ["autodocs"],
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    a11y: {
      // 'todo' - show a11y violations in the test UI only
      // 'error' - fail CI on a11y violations
      // 'off' - skip a11y checks entirely
      test: "todo",
    },
  },

  decorators: [withRouter],
};

export default preview;

EmptyNotice.tsx

import type { MouseEvent } from "react";
import { useNavigate } from "react-router";

const EmptyNotice = () => {
  const navigate = useNavigate();

  const handleClickBack = (event: MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    navigate("/");
  };

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        height: 400,
        alignItems: "center",
        flexDirection: "column",
      }}
    >
      <p style={{ fontSize: "50px", fontWeight: 300 }}>텅~</p>
      <button onClick={handleClickBack} style={{ cursor: "pointer" }}>
        홈으로 가기
      </button>
    </div>
  );
};

export default EmptyNotice;

EmptyNotice.stories.tsx

import type { Meta, StoryObj } from "@storybook/react-vite";
import EmptyNotice from "./EmptyNotice";

const meta = {
  title: "장바구니/EmptyNotice",
  component: EmptyNotice,
} satisfies Meta<typeof EmptyNotice>;

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

export const Default: Story = {
  name: "장바구니가 빈 경우",
};

AI하고 문답하면서 디버깅 하는데 좀처럼 원인을 못찾겠어서 질문올립니다.

javascript tdd 소프트웨어-테스트 vitest e2e chromatic

답변 1

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. Coi님.

제시해주신 코드와 오류 내용에서 React Router 패널이 제대로 로그를 찍지 않는 문제를 겪고 계신 것 같습니다. Storybook에서 storybook-addon-remix-react-router을 사용할 때, 특정 상황에서는 라우터 설정이나 Provider 중 누락된 부분이 있을 수 있습니다. 다음과 같은 방법들을 따라 점검해 주세요.

1. Addon 설정 확인

현재 storybook-addon-remix-react-router가 addon에 포함되어 있으니 설정 자체는 맞는 것으로 보입니다. 다만, 아래 설정이 누락되지 않았는지 확인해 보세요.

2. Provider 추가 여부 확인

Storybook에서 React Router를 이용할 때는 BrowserRouter 또는 적절한 라우터 Provider로 컴포넌트를 래핑해야 합니다. preview.tsx에 라우터 Provider를 추가한 후 데코레이터로 사용해 보세요:

// .storybook/preview.tsx
import type { Preview } from "@storybook/react-vite";
import { withRouter } from "storybook-addon-remix-react-router";
import { BrowserRouter } from "react-router-dom";

const preview: Preview = {
  tags: ["autodocs"],
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    a11y: {
      test: "todo",
    },
  },
  decorators: [
    (Story) => (
      <BrowserRouter>
        <Story />
      </BrowserRouter>
    ),
    withRouter,
  ],
};

export default preview;

3. Storybook 호환성 확인

각종 라이브러리의 버전 충돌이나 호환성 문제가 있을 수 있습니다. storybook-addon-remix-react-router, react-router, 그리고 storybook의 버전이 호환되는지 공식 문서를 참조하여 확인해 보세요.

4. 문서 참고

공식 문서에도 언급된 예제를 적용하여 제대로 작동하는지 확인해 볼 가치가 있습니다. 아래 링크는 storybook-addon-remix-react-router의 공식 문서 페이지입니다:
- storybook-addon-remix-react-router 문서

해당 정보가 문제를 해결하는데 도움이 되었으면 좋겠습니다. Storybook과 관련한 다양한 설정 옵션이 있으니, 필요하시다면 추가 정보를 통해 더욱 깊이 파악해 보셔도 좋습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

Coi

작성한 질문수

전체 Q&A

질문하기