React Testing: Hooks testing

---

🧐 Hooks testing?

리액트 프로젝트에서 react-hooks를 사용한다면, 공통된 로직이든 상태관련 로직이든 다양한 custom hook을 만들어 사용하게된다.
따라서 reducer나 component 테스팅뿐만 아니라 이러한 custom hook들이 의도대로 작동하는지도 테스팅해주는 것이 좋다.
하나의 component에서 사용되는 hook이거나 간단한 로직의 hook이라면 직접 테스팅하는 것이 쉽겠지만,
복잡한 로직의 hook이나 API요청이 있는 hook등은 직접 테스팅하는 것이 조금은 복잡할 수 있다.
testing-library/react-hook 라이브러리를 사용하면 이러한 hook들을 쉽게 테스팅할 수 있다.

---

📚 testing-library/react-hooks

testing-library/react-hooks의 API 중 가장 흔하게 쓰이는 것들은 renderHook, act이다.
renderHook은 커스텀훅을 따로 컴포넌트를 만들필요없이 쉽게 테스트할 수 있게해주고
act는 커스텀훅을 업데이트할 때 쓰이는 API이다.
그외 다양한 API들은 이곳을 참고하면 된다.

작성한 테스트코드

// useFilter.ts
export function useFilter() {
  const filter = useRootState((state) => state.filter);
  const dispatch = useDispatch();
  const actions = useMemo(() => bindActionCreators(filterActions, dispatch), [dispatch]);
  return [filter, actions.applyFilter] as const;
}

// useFilter.test.ts

import { act, renderHook } from '@testing-library/react-hooks';
import prepareMockReduxWrapper from '@/lib/prepareMockReduxWrapper';
import { filterActions } from '@/_reducer/filter';
import { useFilter } from '@/hooks/useFilter';
import configureMockStore from 'redux-mock-store';

describe('useFilter', () => {
  const setup = () => {
    const [wrapper, store] = prepareMockReduxWrapper({
      filter: 'ALL',
      todos: [],
    });
    const { result } = renderHook(() => useFilter(), { wrapper });
    return { store, result };
  };

  ...

  it('confirm dispatch', () => {
    const { store, result } = setup();
    // applyFilter 함수를 호출하고
    act(() => {
      result.current[1]('DONE');
    });
    // 해당 액션이 디스패치 됐는지 확인
    expect(store.getActions()).toEqual([filterActions.applyFilter('DONE')]);
  });

    ...
});

위의 prepareMockReduxWrapper은 redux-mock-store라이브러리를 사용해서 initial state를 받고, wrapper와 store을 리턴하는 함수다.
renderHook을 사용하면 위처럼 특정 wrapper로 감싸줄 수도 있고, 이것외에도 다양한 option을 추가하여 커스텀훅을 테스팅할 수 있다.
renderHook의 result객체의 current에는 커스텀훅의 리턴값이 포함되어있다.
따라서 useFilter.ts의 리턴값 중 filter에 접근하기 위해서는 result.current[0]으로 접근할 수 있게된다.
이러한 hook을 업데이트하기위해서 act함수를 사용하였고, 제대로 액션이 디스패치됐는지 확인하는 코드를 작성하였다.

비동기 hooks 테스팅

testing-library/react-hooks는 비동기적으로 업데이트되는 hooks 테스팅도 도와준다.👍

import { renderHook } from '@testing-library/react-hooks'
import { useCounter } from './counter'

test('should increment counter after delay', async () => {
  const { result, waitForNextUpdate } = renderHook(() => useCounter())

  result.current.incrementAsync()

  await waitForNextUpdate()

  expect(result.current.count).toBe(1)
})

바로 renderHook의 리턴값 중 waitForNextUpdate함수를 사용하면 된다.
await waitForNextUpdate()를 실행하면 커스텀훅의 비동기함수인 incrementAsync함수가 완료될때까지 기다린 뒤 테스팅할 수 있다.

🙏 참고

• jest 공식문서
• Jest와 Enzyme을 이용한 React 커스텀 훅(custom hook) 테스팅(test)
• testing-library/react-hook 공식문서