userEvent v14 にアップデート🎉 v13 との違い

1. 非同期処理と setup() の導入

userEvent v13： userEvent は直接メソッドを呼び出す形で使用できましたが、非同期の動作や状態の管理に関する細かい部分を管理するのは手動で行う必要がありました。例えば、キーボード入力やクリック操作が複数連続で行われる場合、適切な順序でイベントが発火することを保証するためには、テストの中で追加のコードが必要でした。

userEvent v14: 新たに userEvent.setup() メソッドが導入されました。これにより、ユーザーインタラクションをシミュレートするためのインスタンスを設定できるようになり、連続する操作の管理が容易になりました。setup() を使うことで、キーボードの状態やその他の入力デバイスの状態が維持され、実際のユーザーインタラクションに近い挙動を再現できるようになりました。

2. クリップボードのモック

userEvent v13：クリップボード API をテストする方法が提供されていませんでした。

userEvent v14：クリップボード API がセキュアなコンテキスト外で利用できない場合でも、userEvent.setup() が window.navigator.clipboard をスタブに置き換え、クリップボードを操作するテストが可能になりました。

3. 非同期操作の管理

userEvent v13： userEvent.type() などのメソッドはデフォルトで同期的に動作しますが、delay オプションを指定することで遅延を設定することができました。このため、複数のインタラクションが非同期的に動作する場合、手動で非同期操作を管理する必要がありました。

userEvent v14：非同期操作がより一貫性を持って管理されるようになり、setup() を使用することで、非同期のタイミングや状態の管理が簡単になりました。これにより、テストがより安定し、予測可能な動作を示すようになりました。

4. テストの推奨方法

userEvent v13： userEvent のメソッドを直接呼び出すことができますが、テストの中で before や after フック内で使用することは避けるべきだという注意がありました。

userEvent v14：より厳格にテスト内で userEvent.setup() を使用することが推奨されるようになり、テストコードの可読性と安定性が向上しました。setup() を使用することで、入力デバイスの状態が適切に管理され、複数の連続した操作が正しく再現されます。

5. 移行と互換性

userEvent v13：バージョンアップに伴う移行作業がやや手間がかかりました。特に、イベントのシミュレーションに関する挙動が不安定な場合があり、テストコードが壊れることもありました。

userEvent v14： setup() メソッドを使用することで、バージョン14への移行が容易になり、以前のバージョンとの互換性も高くなっています。setup() を使うことで、今後のバージョン変更にも柔軟に対応できるようになりました。

6. 推奨されるテスト方法の変更

userEvent v13：より自由にメソッドを使うことができましたが、テストの中でイベントを発火させる順序や状態管理には注意が必要でした。

userEvent v14：テスト内で setup() を使うことが推奨され、テストの実行順序や状態の一貫性が保たれるようになりました。

使い方

① userEvent.setup() で初期化する
② ①で初期化した userEvent を使う

初期化する理由

ユーザーインタラクションをシミュレートするための初期設定を行う
実際のブラウザでのユーザーインタラクションに近い動作を再現する
インタラクション可能な要素をチェックする
非同期タスクを適切に管理し、テストが正確に実行されるようにする

そのため、テスト内で userEvent.setup() を呼び出すことは、テストを信頼性高く、かつ実際のユーザーの動作に近い形でシミュレートするために必要である。

おわりに

下記のページを読んでいて気づきました。

公式のドキュメントって読まないと知らないことが多いな〜という学びです。
だってだって・・・初期化しなくても普通に使えてるし・・・。
もしかしたらどこかで悪さしてたのかもしれないけど、絶対気付けないや〜つ😇