커스텀 후크란?

React Hooks를 사용하면 사용자 고유의 사용자 지정 후크를 만들 수 있습니다. 이 기능을 사용하면 UI 구성 요소에서 로직을 쉽게 분리하고 재사용할 수 있습니다.
그러나 커스텀 훅은 React 컴포넌트 내에서만 작동하기 때문에 유닛 테스트를 수행하는 데 약간의 팁이 필요할 것 같습니다.

그래서 커스텀 후크를 테스트해 봅시다.

환경 구축

평소 ( Create React APP + TypeScript ).

사용자 지정 후크 만들기

환경 구축이 끝나면 커스텀 후크를 만드세요.

src/useCount.ts

import { useState } from 'react'

const useCount = (): [number, () => void, () => void] => {
  const [count, setCount] = useState(0)

  const increment = () => setCount(count + 1)
  const decrement = () => setCount(count - 1)

  return [count, increment, decrement]
}

export default useCount

커스텀 후크의 이름은 머리에 use를 붙여야 합니다. 「이것은 커스텀 훅이다」라고 알기 쉽게 하기 위해서입니다.
여기서 작성한 후크는, 수치의 처리 조작을 정리한 것입니다. 예를 들면 다음과 같이 이용합니다.

src/App.tsx

// カスタムフック利用例
import React from 'react'
import useCount from './useCount'

const App: React.FC = () => {
  const [count, increment, decrement] = useCount()

  return (
    <div className="App">
      <p>カウント：{count}</p>
      <button onClick={() => increment()}>1増やす</button>
      <button onClick={() => decrement()}>1減らす</button>
    </div>
  )
}

export default App;

간단한 카운터 앱이군요. 버튼을 누르면 1 증가하거나 줄이거나 합니다. 이와 같이, UI로부터 처리를 잘라내고 따로따로 기술할 수 있는 것이, 커스텀 훅을 사용하는 것의 큰 이점일 것입니다.

맞춤형 후크 테스트

먼저 React Testing Library을 추가합시다. 그건 그렇고, 공식적으로도 추천됩니다.

$ yarn add -D @testing-library/react

React Testing Library를 사용하면 소위 보일러 템플릿을 생략 할 수 있습니다.
나머지는 테스트를 작성하는 것입니다. 완성된 테스트는 이쪽이 됩니다.

src/useCount.test.tsx

import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import useCount from './useCount'

it('useCountのユニットテスト', () => {
  const TestComponent: React.FC = () => {  // テスト用Reactコンポーネント作成
    const [count, increment, decrement] = useCount()

    return (
      <div>
        <p title="count">{count}</p>
        <button title="increment" onClick={() => increment()}></button>
        <button title="decrement" onClick={() => decrement()}></button>
      </div>
    )
  }

  const { getByTitle } = render(<TestComponent />)  // 仮想DOMにレンダリング

  const count = getByTitle("count")  // HTML要素を取得

  expect(count!.textContent).toEqual("0")

  fireEvent.click(getByTitle("increment"))  // クリックイベントを発火
  expect(count!.textContent).toEqual("1")

  fireEvent.click(getByTitle("decrement"))
  fireEvent.click(getByTitle("decrement"))
  expect(count!.textContent).toEqual("-1")
})

처음에도 썼지만 커스텀 후크는 React 컴포넌트 내에서만 작동합니다. 또한 사용자 정의 후크의 값과 함수를 외부에서 직접 호출 할 수 없습니다 (어쩌면 내가 모르는 것만). 따라서 이번에는 테스트용 구성 요소를 만들고 HTML 요소에서 간접적으로 값과 함수를 호출하여 테스트를 수행합니다.

인수를 바꾸어 몇번이나 함수를 호출하고 싶은 일도 있다고 생각합니다. 그 때는, 개별적으로 인수를 설정한 함수를 준비해 버튼에 바인드 해, 클릭 이벤트로 차례로 호출한다고 하는 방법을 사용할 수 있다고 생각합니다. 버튼을 메소드 바꾸기로 하는 것이군요.

HTML 요소 획득 이나 이벤트 발화 에는 유연한 API 가 준비되어 있으므로, 자세한 것은 공식을 봐 주세요.

요약

커스텀 훅을 사용하면 로직을 유연하게 조립할 수 있습니다. 선언적 UI는 React Hooks에서 완성에 이른다 라고 하는 기사도 있고, 향후의 React 개발에서는 커스텀 훅의 지식이 필수가 될까 생각합니다.
커스텀 훅으로 복잡한 처리를 실시하기 위해서도, 테스트 방법은 마스터 해 두고 싶은 곳이군요.