스냅샷

컴포넌트의 DOM 구조를 직렬화하여 기록하거나, 이미지 형태로 기록하는것

JsDOM 스냅샷 테스트는 DOM 구조를 기록하고 이전에 기록한 스냅샷과 비교하여 검증하는 테스트다.

과정

1. 대상 컴포넌트를 렌더링한다.
2. 컴포넌트의 DOM을 직렬화해 스냅샷으로 기록한다.
3. 기존의 스냅샷과 새로운 스냅샷을 비교한다. (비교할 스냅샷이 없다면 현재 스냅샷을 기록하여 다음 스냅샷과 비교.)
4. 기존 스냅샷과 현재 스냅샷이 동일한 경우 테스트는 통과한다.
5. 기존 스냅샷과 현재 스냅샷이 다르다면 변경 사항을 확인한다.
6. 의도한 변경일 경우 스냅샷을 업데이트(다음 비교 기준이 되도록)한다.

UI 컴포넌트 테스트

it('pageTitle 스냅샷 테스트(toMatchInlineSnapshot)', async () => {
  const { container } = await render(<PageTitle />);

  expect(container).toMatchInlineSnapshot(`
    <div>
      <h1
        class="MuiTypography-root MuiTypography-h4 css-1lnl64-MuiTypography-root"
      >
        상품 리스트
      </h1>
      <div
        style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
      />
    </div>
  `);
});

const PageTitle = () => (
  <Typography variant="h4" component="h1" padding="20px 0">
    상품 리스트
  </Typography>
);

이렇게 해당 컴포넌트의 렌더링 결과를 그대로 비교해서 일치하면 통과하는 방식.

toMatchSnapshot() 함수를 사용한다면 비교 기준이 되는 코드가 별도 파일로 분리되어 저장되기 때문에 테스트 코드가 길어지지 않는다.

일반 함수

it('단일 인자로 전달된 키의 값을 객체에 담아 반환한다', () => {
    const obj = {
      a: 'A',
      b: { c: 'C' },
      d: null,
    };

    expect(pick(obj, 'a')).toEqual({ a: 'A' });
  });

  it('단일 인자로 전달된 키의 값을 객체에 담아 반환한다(snapshots)', () => {
    const obj = {
      a: 'A',
      b: { c: 'C' },
      d: null,
    };

    expect(pick(obj, 'a')).toMatchInlineSnapshot(`
      {
        "a": "A",
      }
    `);

당연히 직렬화된 문자열과 비교하는 것이기 때문에 UI 컴포넌트 뿐 아니라 일반적인 유틸함수의 결과도 이렇게 스냅샷 테스트를 통해 검증할 수 있다.

위의 toEqual 로 검증하는것과 똑같은데 굳이 사용해야 하는 이유는? 만약 객체 안에 여러 속성들을 비교하고 싶다면 스냅샷 테스트를 통해 한번에 검증하는게 훨씬 간단하다.