[코드숨] 리액트 6기 5주차 주간회고

[ 강의 ]

- TDD에 대한 고찰

- redux-thunk 적용

- 비동기 테스트

 

 

 

< 비동기 테스트 >

 

음... 비동기 테스트에 대해서 제대로 알지 못했었는데, 고민할 수 있는 시간이어서 좋았습니다.

리액트 테스트 코드 작성에 대해서 모르는 부분이 많았었는데, 특히 비동기 테스트는 더 궁금한 부분이었습니다.

 

아직도 모호하게 알고 있는 부분이 있겠지만, 과제풀이도 보고 다른 분들의 리뷰, 회고록 등을 보면서 

접근 방식에 대해서 생각해볼 수 있었습니다.

 

 

이번 과제에서 thunk의 역할은 API를 통해 데이터를 가져오고, set ~ 액션으로 데이터를 store에 저장하는 것이었는데,

테스트로 원하는 결과는 1) 데이터를 제대로 가져오는가? 2) 데이터가 store에 저장되는가?

두 가지로 볼 수 있을 것 같습니다.

 

 

이전 강의에서 useSelector나 useDispatch를 mocking한 것처럼, thunk를 직접 mocking해서 시도해보려고 했는데

action 파일에 다른 액션들과 같이 있어서, 따로 mocking이 어렵다고 판단했습니다.

지금 생각해보니, thunk 들만 따로 분리해서 mocking을 할 수 있겠다는 생각이 듭니다.

 

 

redux-mock-store를 통해 비교적 thunk를 쉽게 테스트해볼 수 있다고 해서, 이것으로 thunk 테스트를 처리해봤습니다.

 

import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';

import {
  loadRegions, loadCategories, loadRestaurants, setRegions, setCategories, setRestaurants,
} from '.';
import { regionsData, categoriesData, restaurantsData } from '../fixtures';
import { fetchRestaurants } from '../services/api';

const mockStore = configureStore([thunk]);

jest.mock('../services/api');

describe('actions', () => {
  describe('loadRegions', () => {
    it('지역 정보를 가져온다.', async () => {
      const store = mockStore({});
      await store.dispatch(loadRegions());
      const actions = store.getActions();

      expect(actions[0]).toEqual(setRegions(regionsData));
    });
  });
  
 ...

 

 

 

<TDD>

 

이번 과제를 진행할 때는 작은 컴포넌트부터 시작해서 전체를 구현하는 방식으로 접근했습니다.

그리고, 어느 정도 설계를 하고 접근했는데 트레이너님의 피드백은 "일단 구현하고, 나중에 리팩토링으로 처리하라는 것"이었습니다.

 

틀을 먼저 생각하고 구현하다 보니, 투머치하게 기능을 나누거나 기능을 만들거나 하는 부분이 생기긴 했습니다.

TDD 방식이 "단순히 테스트 코드 먼저 작성하고, 개발하는 방식이 아니구나" 라는 것을 깨달았습니다.

 

빠르게 코드를 작성하고, 필요할 때 리팩토링해줘야 코드 관리나 생산성에도 영향을 주는 것으로 보입니다..!

 

 

 

< 막연하게 Jest 기능들 >

 

강의에서 알려준 Jest 사용법만 이해하다 보니, Jest의 기능에 대해 모호하게 알고 있던 것이 있었습니다. 

가령, mockFn.mockImplementation(fn) 이 그런 것이었는데요.

 

이 기능은 mock 함수에서만 적용할 수 있는 것입니다.

 

 

mock 함수에서 적용할 수 있는 기능들이 존재하고 (Mock Functions)

useSelector.mockImplementation((state) => ({
	name: state.name,
    id: state.id,
});

 

 

Jest 객체 자체에서 사용할 수 있는 기능들이 존재합니다 (The Jest Object)

jest.mock('react-redux');


beforeEach(() => {
	jest.clearAllMocks();
});

...

 

 

당연하게 받아들이는 것들도, 한번 API 문서를 보면서 정확한 기능 및 역할을 파악해야 겠다는 생각이 들었습니다!