<div id="readability-page-1" class="page"><div>
 <div id="SE-d269c59e-19eb-4602-afc5-923b64052bd7">
 스냅샷 테스트는 컴포넌트의 렌더링 결과를 테스트하기 위한 기법으로, 특정 시점에서 컴포넌트의 UI 출력이 예상된 형태와 일치하는지를 검증합니다. 참고로 스냅샷이란 특정 시점에서의 상태나 데이터를 기록한 일종의 '사진'과 같은 것을 말합니다. 이 개념은 여러 분야에서 사용되지만 개발에서는 주로 상태나 출력 결과를 저장하고 비교하는 데 사용됩니다.​스냅샷 테스트의 동작 원리는 다음과 같습니다.​<ol><li>리액트 컴포넌트를 렌더링하고, 그 결과물인 DOM 구조를 캡처합니다.</li><li>렌더링된 컴포넌트의 DOM 구조는 스냅샷 파일로 저장됩니다. 이 파일은 일반적으로 __snapshots__ 디렉토리에 생성됩니다.</li><li>이후 테스트가 실행될 때마다, 현재 렌더링된 결과와 저장된 스냅샷을 비교합니다.</li><li>컴포넌트의 렌더링 결과가 이전 스냅샷과 다르면 테스트는 실패합니다. 만약 의도한 변경일 경우에는 스냅샷을 업데이트할 수 있습니다.</li></ol>​그럼 테스트 코드를 통해 간단하게 스냅샷을 만들어 보겠습니다.
 </div> <div id="SE-6cc8f924-6c8f-4737-82d9-e9f221d0c1a8">
 const Title = () =&gt; {
 return (
 &lt;h2&gt;상품 리스트&lt;/h2&gt;
 );
};

export default Title;
 </div> <div id="SE-d31973d8-b8e5-491f-a507-847c58903736">
 import {describe, expect, it} from "vitest";
import {render} from "@testing-library/react";
import Title from "@/components/Title";

describe("Title", () =&gt; {
 // 테스트 파일과 스냅샷 파일을 별도로 관리하고 싶은 경우
 it('toMatchSnapshot', async ()=&gt; {
 const { container } = await render(&lt;Title /&gt;)
 expect(container).toMatchSnapshot()
 })
});
 </div> <div id="SE-c6f030d5-8905-4168-a2f3-e0b38a5fb7cb">
 ​테스트 코드를 실행하면 __snapshots__ 폴더가 생성이 되고 스냅샷 파일 구조를 확인할 수 있습니다.
 </div> <div id="SE-1eb31572-8f92-4943-9e29-f73ed7fd63e0">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-1eb31572-8f92-4943-9e29-f73ed7fd63e0&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDA4MDdfMjQ2/MDAxNzIzMDQyNDU1MzYx.mvigcvJa6fpXHPZ3DjAOCS0ouWjUR15jbWKbEe38TTUg.po-76w1C_CAxGzeWjpWrQe1JCbhbf6uPJT5bWsiLPKEg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-08-07_%EC%98%A4%ED%9B%84_11.54.04.png&quot;, &quot;originalWidth&quot; : &quot;1758&quot;, &quot;originalHeight&quot; : &quot;616&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDA4MDdfMjQ2/MDAxNzIzMDQyNDU1MzYx.mvigcvJa6fpXHPZ3DjAOCS0ouWjUR15jbWKbEe38TTUg.po-76w1C_CAxGzeWjpWrQe1JCbhbf6uPJT5bWsiLPKEg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-08-07_%EC%98%A4%ED%9B%84_11.54.04.png?type=w800" data-width="886" data-height="310" alt="">
 </a>
 
 </div>
 <div id="SE-6bd76a1f-7701-4ba6-b412-cab81dd220ac">
 앞에서 작성한 스냅샷을 기준으로 강제로 에러를 발생시켜보겠습니다. Title 컴포넌트를 &lt;h2&gt; -&gt; &lt;h1&gt;으로 변경합니다.
 </div> <div id="SE-38a011cb-5ec9-49be-a69e-69fd60310370">
 const Title = () =&gt; {
 return (
 &lt;h1&gt;상품 리스트&lt;/h1&gt;
 );
};

export default Title;
 </div> <div id="SE-e6ac1670-3f3c-48e5-8e2d-157fe93e2148">
 ​그럼 스냅샷에 저장된 정보가 일치하지 않아 에러가 발생합니다.
 </div> <div id="SE-1e180363-ee58-436c-8065-bb0683acbb51">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-1e180363-ee58-436c-8065-bb0683acbb51&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDA4MTFfNjgg/MDAxNzIzMzY0NDc0OTc1.Edn9IJuYvKovdKhPET25haAAHRRKNQXUDNyqJvl-z_Ug.AV55KJ3ED04rbNtMMrCDBwcj227oTMuieED2KEngIGQg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-08-11_%EC%98%A4%ED%9B%84_5.21.05.png&quot;, &quot;originalWidth&quot; : &quot;1408&quot;, &quot;originalHeight&quot; : &quot;1586&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDA4MTFfNjgg/MDAxNzIzMzY0NDc0OTc1.Edn9IJuYvKovdKhPET25haAAHRRKNQXUDNyqJvl-z_Ug.AV55KJ3ED04rbNtMMrCDBwcj227oTMuieED2KEngIGQg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-08-11_%EC%98%A4%ED%9B%84_5.21.05.png?type=w800" data-width="886" data-height="998" alt="">
 </a>
 
 </div>
 <div id="SE-bc296716-6d39-45d8-9263-040a81558430">
 ​​만약 변경 사항이 의도된 것이라면 u를 입력하여 스냅샷을 업데이트합니다.
 </div> <div id="SE-fcf8e63c-367a-4922-a46a-ec17a10bd11d">
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Title &gt; toMatchSnapshot 1`] = `
&lt;div&gt;
 &lt;h1&gt;
 상품 리스트
 &lt;/h1&gt;
&lt;/div&gt;
`;

 </div> <div id="SE-3be7e2ad-b3f9-40ef-a7f2-d1f042264d53">
 ​그럼 테스트가 재시작되고 정상적으로 통과되는 것을 볼 수 있습니다.
 </div> <div id="SE-e3ae642a-e554-461b-a476-0fdac03afc5a">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-e3ae642a-e554-461b-a476-0fdac03afc5a&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDA4MTFfMjQ2/MDAxNzIzMzY0NzMyODUz.OF5fq5QHTPvpowNMdZrnNXmF67v4KDBrmhzo_Vt84wAg.SQfK8hGcu77WFz6RFcTmBfpwH3HwDA8DI0S7v7stw3Yg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-08-11_%EC%98%A4%ED%9B%84_5.25.23.png&quot;, &quot;originalWidth&quot; : &quot;1052&quot;, &quot;originalHeight&quot; : &quot;638&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDA4MTFfMjQ2/MDAxNzIzMzY0NzMyODUz.OF5fq5QHTPvpowNMdZrnNXmF67v4KDBrmhzo_Vt84wAg.SQfK8hGcu77WFz6RFcTmBfpwH3HwDA8DI0S7v7stw3Yg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-08-11_%EC%98%A4%ED%9B%84_5.25.23.png?type=w800" data-width="886" data-height="537" alt="">
 </a>
 
 </div>
 <div id="SE-45a6113d-9d56-4def-9667-9166033564ef">
 하지만 스냅샷 테스트는 몇 가지 한계를 가지고 있습니다. ​1. 불필요한 테스트 실패스냅샷 테스트는 DOM 구조나 컴포넌트의 출력 결과가 조금이라도 달라지면 테스트가 실패합니다. 이는 의도하지 않은 변경을 감지하는 데 도움이 되지만, 작은 스타일 변화나 내부적으로 불필요한 변경이 발생했을 때도 테스트가 실패할 수 있습니다. 이런 경우, 실제로 문제가 되지 않는 변경이라도 테스트를 수정하거나 스냅샷을 업데이트해야 하는 번거로움이 있습니다. CSS 클래스 이름 변경, 일부 텍스트의 사소한 변경 등과 같은 UI의 비본질적인 요소들이 스냅샷을 깨뜨릴 수 있습니다. 예를 들어, 텍스트의 미세한 변경으로 인해 스냅샷 테스트가 실패한다면, 그 원인이 중요한지 아닌지 판단하고 스냅샷을 업데이트해야 합니다.​2. 변경 감지의 과도함설명: 스냅샷 테스트는 구조적 변경을 정확히 감지하지만, 너무 많은 정보를 기록할 경우 테스트의 유용성이 떨어질 수 있습니다. 큰 컴포넌트나 복잡한 UI를 스냅샷으로 기록하면, 테스트 결과에서 무엇이 실제로 변경되었는지 파악하기 어려워집니다. 이러한 상황에서는 진정으로 중요한 변경을 놓치거나, 불필요하게 많은 시간을 테스트 유지보수에 사용하게 될 수 있습니다. 대규모 리팩터링 시, UI에는 변화가 없지만 내부 구현이 달라지는 경우, 스냅샷 테스트가 불필요하게 많이 실패할 수 있습니다. 이 경우 테스트를 통과시키기 위해 수많은 스냅샷을 업데이트해야 할 수도 있습니다.​3. 의미 없는 스냅샷설명: 스냅샷 테스트가 의미를 가지려면, 스냅샷이 생성된 맥락과 그 내용이 중요합니다. 그러나 스냅샷 테스트가 자동으로 생성된 후, 개발자가 그 내용을 깊이 이해하지 못한 채 그대로 유지하는 경우가 많습니다. 스냅샷 자체가 너무 크거나 복잡하다면, 어떤 부분이 중요한지, 어떤 부분이 변경되어야 하는지를 판단하기 어려워질 수 있습니다. 수백 줄에 이르는 거대한 스냅샷이 있는 경우, 그 중 어떤 부분이 실제로 중요한지 파악하기 어려워지며, 스냅샷이 단순히 "통과해야 하는 것"으로 전락할 수 있습니다.​4. 동적 데이터 처리의 한계스냅샷 테스트는 정적인 출력 결과를 저장합니다. 따라서 컴포넌트가 동적 데이터나 시간에 따라 변하는 요소를 포함하고 있을 때, 이 데이터를 포함한 스냅샷은 매번 다른 결과를 초래할 수 있습니다. 이로 인해 테스트가 불안정해지거나, 동적 요소에 대해 불필요한 예외 처리를 해야 할 수 있습니다. 예를 들어, 현재 시간을 출력하는 컴포넌트를 테스트하는 경우, 시간은 매번 달라지므로 스냅샷 테스트는 계속 실패할 수 있습니다. 이런 경우, 시간을 고정된 값으로 처리하거나 스냅샷에서 동적 요소를 제외하는 방법을 찾아야 합니다.​5. 테스트 커버리지의 제한설명: 스냅샷 테스트는 컴포넌트의 구조를 검증하는 데는 적합하지만, 컴포넌트의 동작이나 사용자 상호작용, 그리고 비주얼 디자인 등의 다른 측면을 테스트하는 데에는 적합하지 않습니다. 스냅샷 테스트만으로는 전체적인 컴포넌트의 동작을 검증할 수 없으므로, 다른 형태의 테스트와 결합해서 사용하는 것이 필요합니다. 버튼 클릭 시 발생하는 동작이나 비주얼 상태의 미세한 변화를 스냅샷 테스트만으로는 포착할 수 없습니다. 이러한 기능은 단위 테스트나 엔드투엔드(E2E) 테스트를 통해 검증하는 것이 더 적합합니다.​​
 </div> </div></div>

개발하는 기획자. 기획하는 개발자.

스냅샷 테스트는 컴포넌트의 렌더링 결과를 테스트하기 위한 기법으로, 특정 시점에서 컴포넌트의 UI 출력이 예상된 형태와 일치하는지를 검증합니다. 참고로 스냅샷이란 특정 시점에서의 상태나 데이터를 기록한 일종의 '사진'과 같은 것을 말합니다. 이 개념은 여러 분야에서 사용되지만 개발에서는 주로 상태나 출력 결과를 저장하고 비교하는 데 사용됩니다. 스냅샷 테스트의 동작 원리는 다음과 같습니다. 리액트 컴포넌트를 렌더링하고, 그 결과물인 DOM 구조를 캡처합니다. 렌더링된 컴포넌트의 DOM 구조는 스냅샷 파일로 저장됩니다. 이 파일은 일반적으로 __snapshots__ 디렉토리에 생성됩니다. 이후 테스트가 실행될 때마다.......

Vitest 스냅샷 테스트

댓글