제스트 스냅샷

제스트에는 스냅샷(snapshots)이라는 기능이 있다. 이 기능은 리액트 같은 프레임워크에서 컴포넌트를 렌더링한 후 현재 렌더링 결과를 저장된 스냅샷과 비교하여 모든 속성과 HTML이 일치하는지 확인할 수 있게 한다.

이 기능은 깊이 다루지 않을 예정이지만, 필자 경험상 사람들이 스냅샷을 잘못된 방식으로 사용하는 경우가 많았다. 스냅샷을 사용하면 다음과 같이 가독성이 떨어지는 테스트를 만들 수 있다.

it('renders', () => { 
    expect(<MyComponent/>).toMatchSnapshot(); 
});

이 방식은 무엇을 테스트하는지 이해하기 어렵고, 서로 관련이 없는 테스트를 하는 것처럼 보여 준다. 또 중요도가 상대적으로 낮은 작업이나 변경(UI 변경, 패키지 의존성 업데이트 등) 때문에 테스트가 깨질 수 있어 시간이 지나면 유지 보수 비용이 높아질 수 있다. 스냅샷 테스트는 개발 일정에 쫓겨 테스트를 작성해야 할 때 읽기 쉽고 유지 보수 가능한 테스트를 작성하지 않을 좋은 변명이기도 하다. 스냅샷 테스트는 나름의 목적이 있지만, 다른 종류의 테스트가 더 적합한 상황에서도 쉽게 남용될 수 있으므로 주의가 필요하다.

toMatchSnapshot()과 비슷한 함수로는 toMatchInlineSnapshot()이 있다. 자세한 내용은 제스트 공식 문서²⁶에서 확인할 수 있다.