bkdragon's log

ACHT, 있어보이게 영어로 써보았다. 비동기 커스텀 훅 테스트 코드를 작성해보자. api 통신으로 데이터를 받아오기 때문에 MSW를 이용할 것 이다. 사용법 및 세팅법은 이 글에 잘 설명해두었다. 원래는 커스텀 훅을 사용하는 컴포넌트에서 테스트를 했었는데 커스텀 훅 테스트를 분리한 이유가 있다. delete 통신 성공이 204 no-content 였기 때문이다. 아래 코드의 두개의 핸들러를 비교해보자. export const getTodos = () => { return rest.get(`${baseUrl}${paths.todos}`, (_, res, ctx) => { return res(ctx.status(200), ctx.json(sampleTodos)); }); }; const deleteTodo..

테스트를 연습하기 위해 간단한 todo app을 react + typescript + jest + redux를 사용해서 만들어보았다. 직접 해본 결과 redux test 과정은 크게 두가지이다. reducer 테스트 action 객체 생성 테스트 (dispatch 테스트) 이 두가지 테스트를 통해 redux의 기능이 정상 작동하는 것을 브라우저를 사용해 직접 테스트하지 않아도 알 수 있다. reducer 테스트 store/_reducer/todo.ts reducer를 이렇게 작성했다. const TodoSlice = createSlice({ name: 'todo', initialState: [] as StateProps, reducers: { addTodo: (state: StateProps, actio..