😸

React 18 で Custom Hooks のテストを書くときの注意点

2022/08/11に公開

React

概要

React のバージョン18 のプロジェクトで Custom Hooks のテストを書く場合、React のバージョン17 までの書き方と少し異なる部分があった。なのでそれを以下にまとめる。

結論

@testing-library/react-hooks ではなく
@testing-library/react を使用するようにする

React バージョン17 までの書き方

Custom Hooks のテストを書くために必要な renderHook を使用するために
@testing-library/react-hooks をpackage.jsonに追加する必要があった

// index.test.tsx

import { renderHook } from "@testing-library/react-hooks";
import { useHoge } from '.';

describe('useHoge Custom Hooks Test', () => {
  test('Custom Hooks の返り値は hoge になること', () => {
    const { result } = renderHook(() => useHoge());
    expect(result.current.hoge).toBe('hoge');
  }
})

React バージョン18 から発生する問題点

上記テストコードを React のバージョンが18のプロジェクトで
そのままコピペしてきて、テストを実行してみた。

すると、以下のWarning Errorが出現した。

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. 
Until you switch to the new API, your app will behave as if it's running React 17. 
Learn more: https://reactjs.org/link/switch-to-createroot

問題点の原因

React バージョン18から ReactDOM.render ではなく
createRoot を使用することが推奨されるようになった。

この対応を @testing-library/react-hooks がまだ行っていないことが原因。

問題点の解決方法

react-testing-library のバージョン13.1.0以上から
hooks のサポートが入ったのでそれを使用すればWarning Errorを消せる

renderHooks が追加された Pull Request

もう、Mergeされていますね。

上記PRがリリースされたリリースノート

ちゃんとリリースされていますね。

React バージョン18 からの書き方

なので、バージョン13.1.0以上の react-testing-library を package.json に追加した上で、以下のようにテストコードを記載して、テストを実行してみる。

// index.test.tsx

// @testing-library/react-hooks ではなく @testing-library/react から import する
import { renderHook } from "@testing-library/react";
import { useHoge } from '.';

describe('useHoge Custom Hooks Test', () => {
  test('Custom Hooks の返り値は hoge になること', () => {
    const { result } = renderHook(() => useHoge());
    expect(result.current.hoge).toBe('hoge');
  }
})

そうすると、テスト実行後にWarning Errorが出現しなくなりました。

まとめ

@testing-library/react-hooks の対応が完了するまでは、@testing-library/react-hooks のパッケージではなく、@testing-library/react を使用するようにしたほうが良いかもですね。というTipsでした。