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 ๋ช ๋ น์ด๋ฅผ ํตํด ์ ๋ฐ์ดํธ๊ฐ ๊ฐ๋ฅํ๋ค. ์ค๋ ์ท๋ ํ ์คํธ์ ์ผ๋ถ ์ด๊ธฐ ๋๋ฌธ์ ํจ๋ถ๋ฌ ์ ๋ฐ์ดํธ๋ฅผ ํ ๊ฒฝ์ฐ ์๋ฌ์ธ ์ํ์ ์ค๋ ์ท์ผ๋ก ์ ์ฅํ๊ฒ ๋๋ค.