0%

[React] Mobx-state-tree 학습하기 #3 : Snapshots 또는 Patches를 Recording하여 mobx-state-tree 모델 테스트하기

이전글 "[React] Mobx-state-tree 학습하기 #2 : Mobx-state-tree 모델에서 Actions을 사용하기"에서 이어지는 내용입니다. 참고로 이 포스팅은 제가 학습한 내용을 노트에 정리하듯이 기록하여 올리는 글이기 때문에 보팅 안해주셔서 됩니다.





Test mobx-state-tree Models by Recording Snapshots or Patches

강의 링크: https://egghead.io/lessons/react-test-mobx-state-tree-models-by-recording-snapshots-or-patches

3번째 레슨입니다. 모델을 테스트하는 것은 매우 간단합니다. MST는 state가 어떻게 변하는지 정확하게 추적 할 수 있는 도구를 제공합니다. snapshots, 액션 호출 또는 patches를 추적하여 액션이 올바르게 작동하는 지를 확인 할 수 있습니다.

우리는 다음을 배우게 됩니다.

  • getSnapshot를 사용하여 state의 immutable한 snapshots 얻기
  • onSnapshot을 사용하여 snapshots 기록하기
  • onPatch를 사용하여 시간의 흐름에 따른 변화을 저장하고 테스트하기
  • Jest의 snapshots 테스트 기능을 사용하여 snapshots과 patches 검증하기
  • That MST can infer the type of a snapshot for you



getSnapshot 함수를 사용하여 테스트 하기

Model의 전체 속성을 테스트하기 위해서 getSnapshot 함수를 사용합니다. getSnapshot는 모델의 전체 트리 상태를 immutable하고 순수한 JSON 데이터로 만들어줍니다. 테스트 코드는 다음과 같이 작성합니다.
여기에 추가 설명이 있습니다.

src/models/WhishList.test.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { getSnapshot } from 'mobx-state-tree';

it("can add new items", () => {
const list = WishList.create();
list.add(
WishListItem.create({
name: "Chesterton",
price: 10
})
);

expect(getSnapshot(list)).toEqual({
items: [

name: "Book of G.K. Chesterton",
price: 10,
image: ""

]
});
});

그리고 toMatchSnapshot 함수를 사용하면 스냅샷을 기록합니다.

1
2
3
4
5
6
it("can add new items", () =>
const list = WishList.create();
// ...

expect(getSnapshot(list)).toMatchSnapshot();
});


위 테스트를 실행하면 다음과 같이 __snapshots__ 폴더에 스냅샷 파일이 생성됩니다.



onSnapshot 함수를 사용하여 테스트하기

onSnapshot 함수를 사용하여 모델이 변경될 때마다 스냅샷을 states에 저장합니다. 그리고 toMatchSnapshot 함수를 사용하여 스냅샷이 어떻게 변화 했는지 기록합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { getSnapshot, onSnapshot } from "mobx-state-tree";

it("can add new items", () =>
const list = WishList.create();

const states = [];
onSnapshot(list, snapshot =>
states.push(snapshot);
});

//...

expect(states).toMatchSnapshot();



테스트를 수행하고 나서 스냅샷 기록을 보면 스냅샵이 어떻게 바뀌었는지를 살펴볼 수 있습니다.
스냅샷 기록



onPatch 함수를 사용하여 테스트하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { getSnapshot, onSnapshot, onPatch } from "mobx-state-tree";

it("can add new items - 2", () => {
const list = WishList.create();

const patches = [];
onPatch(list, patch => {
patches.push(patch);
})

list.add(
WishListItem.create({
name: "Chesterton",
price: 10
})
);

list.items[0].changeName("Book of G.K. Chesterton");

expect(patches).toMatchSnapshot();
});


onPatch 함수를 사용한 테스트를 수행하고 나서 기록을 보면 모델의 변화에 대해서 살펴볼 수 있습니다. 어떤 작업을 수행했는지, 몇번째 항목의 값이 어떻게 변경되었는지를 확인 할 수 있습니다.