Snapshot

Snapshot Test란?

Jest의 기능 중 하나로 렌더링된 컴포넌트가 예상한대로 렌더링되는지 UI 관점에서 테스트하는 방법

정적인 UI 전체를 검사할 때 유용하다.

정확하게는 렌더링된 DOM Tree를 비교하고 차이가 있으면 테스트가 실패하고 같으면 통과된다.

만약 스냅샷 테스트가 실패하여 UI가 변경되었다는 것을 감지한 경우, 이는 의도하지 않은 변경이 발생한 것이다. 그러나 변경사항이 적절한 경우에는 기존 보관된 스냅샷을 업데이트 해주어야 한다. 테스트 실행창 터미널에서 u 를 누르면 간단히 업데이트 할 수 있다.

로직 테스트가 아닌 오로지 UI 외형 테스트이므로 다른 테스트들과 함께 사용하자.

Snapshot? UI의 상태를 스크린샷 찍듯이 캡처하여 UI 트리 형태의 구조로 보관한다.

테스트를 실행하면, 이전에 저장된 스냅샷과 현재 테스트 후 생긴 새로운 스냅샷을 비교하여 UI가 잘 보이는지, 변경된게 있는지 검사한다.

장점

• 테스트 작성이 간단하고 빠르게 수행 가능

• 코드 변경으로 인한 예기치 않은 UI 변경사항을 빠르게 감지할 수 있다.

단점

• UI의 정적인 부분에 대한 비교를 수행하므로, 동적인 UI에 대해서는 테스트를 수행할 수 없다.

• 스냅샷이 많아질수록 관리하기 어렵다. → 테스트 시간이 길어질 수 있다.

__snapshots__

스냅샷 테스트를 실행하면, 테스트 결과를 __snapshots__ 폴더에 자동으로 생성하여 보관한다.

react-testing-library

Usage

import {render, screen, waitForElementToBeRemoved} from '@testing-library/react';

descrivbe('Component', () => {
  it('renders correctly', () => {
    // asFragment → React 컴포넌트 트리를 문자열로 직렬화
    const {asFragment} = render(<Component />);
    
    expect(asFragment()).toMatchSnapshot();
  })
})

react-test-renderer

Install

npm i -D react-test-renderer @types/react-test-renderer

Usage

import reneder from 'react-test-renderer';

descrivbe('Component', () => {
  it('renders correctly', () => {
    const component = renderer.create(<Component />);
  
    expect(component.toJSON()).toMatchSnapshot();
  })
})