Open6ヶ月前にコメント追加3

テストで困ったこと

Next.js

ぺそ

前提

React
TypeScript
vitest
react-testing-library

ぺそ

async / await が絡む場合に日時をモックする方法

vi.useFakeTimer()``vi.useRealTimer()を使って実装する方法が一般的だが、async awaitが絡むテストコードにおいては、そのやり方だとうまくいかなかった。
以下のように、vi.setSystemTime()だけで日時固定をしたらうまくいった。

  test('閉じるボタンをクリックした場合、閉じた通知がlocalStorageに保存されること', async () => {
    const date = new Date(2024, 6, 11, 13, 16, 45)
    vi.setSystemTime(date)

    render(<Notification />)

    fireEvent.click(await screen.findByRole('button'))

    expect(
      JSON.parse(localStorage.getItem('closedNotificationList') ?? '')
    ).toEqual([{ id: 'mockedId', date: '2024-07-11' }])
  })

ぺそ

SWRのキャッシュが悪さして、テストが通らない

useSWRを活用してデータフェッチする場合、キャッシュが影響してテストが失敗することがある。
そのような場合は、各テストケースでキャッシュをリセットしないといけない。
データフェッチに関わっているコンポーネントを空のキャッシュプロバイダーで囲むことで問題が解決する。

describe('test suite', async () => {
  it('test case', async () => {
    render(
      <SWRConfig value={{ provider: () => new Map() }}>
        <App/>
      </SWRConfig>
    )
  })
})