Zenn
😄

testing libraryでクリック(userEvent.click発火)したらエラーが発生する

に公開
React
Jest
tech

testing libraryでクリック(userEvent.click発火)したらエラーが発生する

ドロップダウンを表示するボタンのクリックをtesting libraryのuserEvent.clickで実装した。テストを走らせたとき、エラーが発生した。
以下が該当のテストコード

userEvent.click(screen.getByTestId("button"));

実際に発生したエラー

Unable to perform pointer interaction as the element inherits `pointer-events: none`:

    BODY  <-- This element declared `pointer-events: none`
     DIV
      HEADER
       DIV
        DIV
         BUTTON#radix-:rf:(testId=button)  <-- Asserted pointer events here

pointerEventCheckオプションを設定し、テストコードを修正したら動作した

userEvent.click(screen.getByTestId("button"), {
  pointerEventsCheck: PointerEventsCheckLevel.Never
});

参考サイト

How to test if element is not clickable in react-testing-library

GitHubで編集を提案

Discussion