Skip to content

fix(frontend) : Chromatic 불안정 스냅샷 수정 #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
zhwltlr wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

fix(frontend) : Chromatic 불안정 스냅샷 수정 #79

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
56fe48c
fix : Chromatic 불안정 스냅샷 수정
zhwltlr Dec 27, 2025
ef1e1d4
fix : 데코레이터를 추가하여 스냅샷 안정화
zhwltlr Dec 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions frontend/src/stories/HomeHeroSection.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,9 @@ export const Loading: Story = {
"I'm selling a MacBook Pro 2021 for $1,200. Contact me at email@example.com",
isLoading: true,
},
parameters: {
chromatic: { disableSnapshot: true },
},

@gemini-code-assist gemini-code-assist Bot Dec 27, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

스냅샷을 비활성화하면 Loading 상태에 대한 시각적 회귀 테스트가 완전히 제외되어, 향후 로딩 스피너의 스타일이 깨지더라도 감지할 수 없게 됩니다.

더 나은 대안은 스냅샷을 비활성화하는 대신, Chromatic 환경에서만 CSS 애니메이션을 중지시키는 것입니다. 이렇게 하면 스냅샷을 안정적으로 유지하면서 시각적 테스트의 이점을 계속 누릴 수 있습니다.

이 스토리 파일에 데코레이터를 추가하여 이 문제를 해결할 수 있습니다.

import isChromatic from "chromatic/isChromatic";

// ...

export const Loading: Story = {
  args: {
    ...defaultArgs,
    value:
      "I'm selling a MacBook Pro 2021 for $1,200. Contact me at email@example.com",
    isLoading: true,
  },
  decorators: [
    (Story) => (
      <>
        {isChromatic() && <style>{`.loading { animation: none !important; }`}</style>}
        <Story />
      </>
    ),
  ],
};

이 방법을 적용하기 위해 현재 추가하신 parameters를 제거하고 위와 같이 decorators를 추가하는 것을 고려해 보세요. 이렇게 하면 테스트 커버리지를 유지하면서 Chromatic 빌드를 안정시킬 수 있습니다.

};

export const WithError: Story = {
Expand Down