React Custom Hooks のユニットテストにて、状態が更新されない問題（cleanup することで解決）

React の Custom Hooks に対して、ユニットテストを書いていました。

testing framework には vitest を利用。 さらに、@testing-library/react を追加。renderHooks という関数が含まれており、Custom Hooks のテストを実行することができます。

testing-library.com

サンプル通りにテストを作成。

しかし、useState を利用した状態変更の関数がテストにパスしない…。状態が更新されていないのです。

import { act, renderHook } from '@testing-library/react'
import { useTab } from './index.hooks'

describe('useTab', () => {
  it('タブ情報が更新される', () => {
    const { result } = renderHook(() => useTab())

    act(() => {
      result.current.setTab(1)
    })

    expect(result.current.tab).toBe(1) // ERROR!! 1になっておらず、初期値の0のまま。
  })
})

clearnup を追加したところ、無事に状態が更新されてテストがパスしました。

import { act, renderHook, clearnup } from '@testing-library/react'
import { useTab } from './index.hooks'

describe('useTab', () => {

  // この1行を追加
  beforeEach(() => cleanup())

  it('タブ情報が更新される', () => {
    const { result } = renderHook(() => useTab())

    act(() => {
      result.current.setTab(1)
    })

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