HTML 스냅샷 테스트
스냅샷 테스트로 의도하지 않은 HTML 변경 포착하기
HTML 스냅샷 테스트은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
스냅샷 테스트란 무엇인가
스냅샷 테스트는 첫 실행에서 컴포넌트 또는 페이지의 렌더링된 출력을 기록한 다음, 이후 실행에서 새 출력을 저장된 스냅샷과 비교합니다. HTML 출력이 변경되면 스냅샷을 의도적으로 업데이트할 때까지 테스트가 실패합니다.
Jest 스냅샷 테스트
Jest의 toMatchSnapshot() 매처는 값(JSX를 HTML로 렌더링한 결과 포함)을 직렬화하고 저장된 파일과 비교합니다. 의도적인 변경이 발생하면 npx jest -u로 스냅샷을 업데이트하십시오. 테스트는 의도하지 않은 렌더링 변경을 잡아내는 회귀 방지망 역할을 합니다.
import { render } from "@testing-library/react";
import Button from "./Button";
test("Button renders consistently", () => {
const { container } = render(<Button>Save</Button>);
expect(container.innerHTML).toMatchSnapshot();
});Storybook 테스트 실행기
Storybook 테스트 실행기는 모든 스토리를 실행하고 axe를 통해 출력의 스냅샷을 생성하며 DOM을 직렬화합니다. Chromatic과 결합하면 여기에 시각적 회귀 검사를 추가하여 DOM 차이뿐 아니라 픽셀 수준의 차이도 확인할 수 있습니다.
Percy 또는 Chromatic을 사용한 시각적 회귀
Percy와 Chromatic은 렌더링된 페이지를 이미지로 스냅샷하고 시각적 차이를 보여 줍니다. DOM 스냅샷으로는 놓치는 CSS 회귀(글꼴 교체, 여백 변경, 색상 변화)를 찾아냅니다. DOM 스냅샷(저렴하고 빠름)과 시각적 스냅샷(비용이 높지만 포괄적임)을 함께 사용하십시오.
스냅샷 유지 관리
너무 쉽게 변경되는 스냅샷은 소음이 됩니다. 날짜, id, 무작위 키처럼 안정적이지 않은 값은 스냅샷으로 만들지 마십시오. 실행마다 합법적으로 달라지는 필드에는 Jest의 속성 매처(expect.any(String))를 사용하십시오. 스냅샷은 작고 핵심에 집중된 상태로 유지하십시오.
스냅샷 코드 검토
풀 리퀘스트의 스냅샷 파일 차이는 주요 검토 대상입니다. 검토자는 DOM 변경이 의도된 것이며 환영할 만한 변경인지 확인할 수 있고, "간단한" CSS 변경으로 인해 연쇄적으로 발생하는 의도하지 않은 영향도 찾아낼 수 있습니다. 스냅샷 차이를 다른 모든 차이와 동일하게 다루십시오.
모든 것을 스냅샷으로 만들지 마세요
거대한 최상위 페이지 렌더링을 스냅샷으로 남기면 취약합니다. 사소한 변경 하나하나가 거대한 차이로 연쇄적으로 이어지기 때문입니다. 컴포넌트 수준에서 스냅샷을 생성하세요. 각 버튼, 각 카드, 각 FormField마다 생성하는 방식입니다. 페이지 수준 렌더링에는 대신 시각적 회귀 테스트가 적합합니다.
스냅샷 직렬화
직렬화 방식을 선택하세요. 전체 HTML, 단순화된 DOM, 속성만, 접근성 트리 중에서 고를 수 있습니다. 각 형식은 서로 다른 회귀를 포착합니다. UI 컴포넌트에는 전체 HTML이 가장 철저하고, 속성 기반 로직에는 속성만 직렬화하는 방식이 더 저렴하며 오탐도 드뭅니다.
스냅샷이 깨지는 경우
가장 흔한 원인은 결과는 동일하지만 구조가 다르게 구성된 HTML을 생성하는 리팩터링입니다. 차이를 살펴보세요. 변경이 의도한 것이고 좋은 변경이라면 스냅샷을 업데이트하세요. 예상하지 못한 변경이라면 근본 원인이 되는 코드를 수정하세요. 검토 없이 jest -u를 실행하는 일은 절대 하지 마세요.
브라우저 간 스냅샷
시각적 회귀 도구는 여러 브라우저에서 렌더링하고 브라우저별 차이를 보고합니다. 이를 사용하면 Safari와 Chrome에서 다르게 렌더링되는 CSS를 포착할 수 있습니다. 초기 도입 단계의 새로운 레이아웃 기능에서 흔히 발생하는 문제입니다. 브라우저 간 스냅샷이 없다면 이러한 회귀는 수동 QA로만 발견됩니다.
다른 테스트와 함께 사용하기
스냅샷 테스트는 필요하지만 충분하지는 않습니다. 의도하지 않은 렌더링 변경은 잡아내지만, 버튼을 클릭했을 때 올바른 동작을 하는지와 같은 로직 버그는 잡아내지 못합니다. 동작에는 단위 테스트를, 사용자 흐름에는 종단 간 테스트를 함께 사용하세요. 각 계층이 서로 다른 실패를 포착합니다.
성능
스냅샷 테스트는 문자열과 파일을 비교하므로 빠릅니다. 시각적 회귀 테스트는 픽셀을 렌더링하고 이미지를 비교하며, 여러 브라우저에서 실행하는 경우가 많아 더 느립니다. 모든 지속적 통합 빌드에서 스냅샷을 실행하세요. 시각적 회귀는 모든 PR에서 실행하되, 지속적 통합 예산에 따라 모든 커밋에서 실행하지 않을 수도 있습니다.
지식 확인
Percy나 Chromatic과 같은 시각적 회귀 테스트로 DOM 스냅샷 테스트를 보완하는 이유는 무엇인가요?
요약
스냅샷 테스트는 첫 실행에서 렌더링된 HTML을 캡처하고 이후 실행에서 모든 변경을 표시합니다. 컴포넌트 DOM에는 Jest의 toMatchSnapshot을, 스토리에는 Storybook 테스트 실행기를, 픽셀 수준의 시각적 회귀에는 Percy 또는 Chromatic을 사용하세요. 페이지 수준이 아니라 컴포넌트 수준에서 스냅샷을 만들고, 불안정한 값은 제외하며, PR에서 차이를 주의 깊게 검토하세요. 전체 범위를 확보하려면 단위 테스트와 종단 간 테스트를 함께 사용하세요.
자주 묻는 질문
“HTML 스냅샷 테스트” 강의는 무료인가요?
네 — “HTML 스냅샷 테스트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“HTML 스냅샷 테스트”에서 뭘 배우나요?
스냅샷 테스트로 의도하지 않은 HTML 변경 포착하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“HTML 스냅샷 테스트” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.