Playwright Component Testを用いた単体テストでJestで書けなかったテストを実現する - ミツカリ技術ブログ

ミツカリのたなしゅん(@tanashun_dev)です。 弊社で提供しているサービスの一部のアクションでドラッグアンドドロップで画面上の要素の並び替えをする機能があります。 この実装にはdnd-kitというライブラリを使っています。 dndkit.com ライブラリのおかげで実装自体はそう難しいものではありませんでしたが、意図しない変更やライブラリのアップデートによってドラッグアンドドロップの動作を壊してしまう可能性が今後つきまといます。 リリースのたびにそれをチェックするのは工数ももったいないです。 ドラッグアンドドロップが正常にできているかどうかをコードレベルで保証するために単体テストを書くべきですね。 前提として、弊社ではfrontendにNext.jsを使っていて、その単体テストはJestで書いています。 まずはJestでテストを書こうとしました。 しかし、結論から言うとJestで

[shingo-sasaki-0529]

D&D みたいなユーザーインタラクションに直結する要素に関しては、無理に Jest なんかで状況再現しても、テストのためのテストコードが大半になって本末転倒だから、ブラウザ使うほうが安心感あるよなぁ。

[tsukaby]

Playwrightは知ってたけどコンポーネントテストというのもできるんだ。これは良さそう

[takayuki007]

、