testing-library-user-eventの更新13.5 to 14

2022-04-14ReactTestingLibrary


RenovateのPRで本ブログのリポジトリのテストがこけていた

参考にはならなそうだが一応ログ残しておく

 FAIL  src/components/__tests__/archive.tsx (8.923 s)
  ● Archive › renders correctly
    expect(element).not.toBeVisible()
    Received element is visible:
      <li aria-label="month-link" />

      49 |     userEvent.click(plusText2021)
      50 |
    > 51 |     expect(monthLInkList[0]).not.toBeVisible() 

PRを見るとv13からv14の変更で結構なBREAKING CHANGESがある模様

公式を見に行くと

こっちが以前のv13

user-event v13 | Testing Library

そもそも使い方がガッツリ変わったようで、そういうアナウンスがあった

こちらが新しいバージョンのドキュメント

Introduction | Testing Library

ということで、公式ドキュメントにしたがって

使い方を変えて解決

const user = userEvent.setup()

await user.click(hogeButton)

setup()の戻り値を変数定義しそこからclick()を呼ぶように変更

clickの戻り値がPromiseになったみたいなのでawaitが必要、それに付随してテストの関数部分にasyncも付与

詳しい差分は下記へ

chore(deps): update dependency @testing-library/user-event to v14 by renovate · Pull Request #722 · swfz/til

こういうのたまにあるのでやはりテスト少しでも書いておくと良いなと感じる