はじめに

Recoilを導入してテストをする際にステートが更新されていることをどうしてもテストしたかったのですが、なかなか解決方法が見つからなかったのでまとめます

問題

Reactのカスタムフックでログイン認証(Axios)を実装しました
そこでは、Axiosの結果に応じて、RecoilのisLoginをtrue/falseに切り替えるという処理を行いました

Jestを書く際に、Recoilのステートが変わることをテストしようとしましたが、公式をみてもやり方がよくわからず困りました

解決方法

testing-library/react-hookを利用して以下のように書けました

test.tsx


  const {result} = renderHook(
    () => {
      const [isLogin, setIsLogin] = useRecoilState(isLoginState)
      const { login } = useAuth()
      return {
        isLogin,
        setIsLogin,
        login,
      }
    },
    {
      wrapper: RecoilRoot
    }
  )

(関数を呼び出す処理は省略)

expect(result.current.state).toBe(true)

おわりに

テストとして行うことが多そうなのですが、なかなかやり方がみつかりませんでした

参考