[REACT] SNAPSHOT TEST

Snapshot Docs

Jest · 🃏 Delightful JavaScript Testing

 

Snapshot Test : UI가 의도치 않게 변하는것을 막기위해 사용할 때 유용함

- 두개의 snapshot을 비교를 하는데, 맞지 않으면 Fail이 뜨기 때문에 의도치 않은 변경이 일어나는 것을 방지함

 

React에서의 활용

- 전체 App을 구성하는 UI를 랜더링 하는 대신, 테스트 랜더링을 통해 React tree에 대한 일련의 값들을 빨리 생성 가능

 

- react-test.js

import React from 'react';
import Link from '../Link.react';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.facebook.com">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

 

-> snapshot file

exports[`renders correctly 1`] = `
<a
  className="normal"
  href="http://www.facebook.com"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Facebook
</a>
`;

 

 

---

 

 

Update

- react-test.js

// Updated test case with a Link to a different address
it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.instagram.com">Instagram</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

- 위와 같이 변경되었을 때 아래 사진과 같이 출력이 될 것이다

- 주소가 달라졌기 때문에 snapshot을 변경해야 함

'u' 혹은 'i'를 눌러 업데이트