Jest 5 Snapshot

jest 5 - snapshot

snapshot์€ React ์ปดํฌ๋„ŒํŠธ ํ…Œ์ŠคํŠธ์—์„œ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ฐœ๋…์ด๋‹ค. toMatchSnapShotํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐœ๋ฐœ์ž๊ฐ€ ์›ํ•˜๋Š” ์Šค๋ƒ…์ƒท์œผ๋กœ ๋งŒ๋“ค์–ด ์˜ˆ์ƒ๋Œ€๋กœ ์ƒ์„ฑ๋˜๋Š”์ง€ ์•„๋‹Œ์ง€๋ฅผ ๋น„๊ตํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.

์‚ฌ์šฉ๋ฒ•

ํ…Œ์ŠคํŠธ ํ•˜๊ณ ์ž ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ toMatchSnapshot๋กœ snapshot์„ ๋งŒ๋“ค๋ฉด __snapshots__์ด๋ผ๋Š” ํด๋”๊ฐ€ ์ƒ๊ธฐ๊ณ  ์•ˆ์— ํŒŒ์ผ์ด ๋“ค์–ด๊ฐ„๋‹ค
import React from 'react';
import renderer from 'react-test-renderer';
import SomeComponent from './SomeComponent';

it('renders correctly', () => {
  // new Date().getTime()์„ ๋ฐ”๋กœ ์‚ฌ์šฉํ•˜๋ฉด ํ…Œ์ŠคํŠธ๋ฅผ ์‹คํ–‰ ํ• ๋•Œ ๋งˆ๋‹ค ๋‹ฌ๋ผ์ง„๋‹ค
  jest.spyOn(Date.prototype, 'getTime').mockReturnValue(1234567890);

  const some = {
    user: 'tester',
    name: 'tester',
    age: 14,
    createdDt: new Date().getTime()
  };

  const tree = renderer
    .create(<SomeComponent someProp={some}/>)
    .toJSON(); // ๊ฐ€๋…์„ฑ์„ ์œ„ํ•ด ์ถ”๊ฐ€
  expect(tree).toMatchSnapshot();
});

์ฃผ์˜ ์‚ฌํ•ญ

์Šค๋ƒ…์ƒท์ด ์ฐ์€ ์‹œ์ ์— ์ž˜๋ชป ๋์„ ๊ฒฝ์šฐ Jest cli์—์„œ u ๋˜๋Š” jest โ€“updateSnapshot ๋˜๋Š” ํŠน์ • ์ปดํฌ๋„ŒํŠธ๋งŒ jest SomeComponent.test.js โ€“updateSnapshot ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด ์—…๋ฐ์ดํŠธ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค. ์Šค๋ƒ…์ƒท๋„ ํ…Œ์ŠคํŠธ์˜ ์ผ๋ถ€ ์ด๊ธฐ ๋•Œ๋ฌธ์— ํ•จ๋ถ€๋Ÿฌ ์—…๋ฐ์ดํŠธ๋ฅผ ํ• ๊ฒฝ์šฐ ์—๋Ÿฌ์ธ ์ƒํƒœ์˜ ์Šค๋ƒ…์ƒท์œผ๋กœ ์ €์žฅํ•˜๊ฒŒ ๋œ๋‹ค.