How to use Jest for Radix Ui Feature

[ahmadmujeeb33]

How would I be able to test this function from a radix Ui modal

onPointerDownOutside={(e)> e.preventDefault()}
using jest. I've tried clicking and pointerDown from fireEvent but it does not work

[deniswou]

Two things are likely going on:

1. Timing: Radix's DismissableLayer (which powers onPointerDownOutside) deliberately defers attaching its outside-pointerdown listener by a tick (setTimeout(..., 0) inside a useEffect), specifically so the same pointerdown event that opened the dialog doesn't immediately register as an "outside" click and close it again. If your test fires the outside event synchronously right after render(), the listener isn't attached yet, and the callback never runs.

   Fix — wait a tick before firing the outside event:

   render(<MyDialog />);
   await new Promise((r) => setTimeout(r, 0)); // let the deferred listener attach
   fireEvent.pointerDown(document.body);
   expect(onPointerDownOutside).toHaveBeenCalled();

   (with fake timers: jest.advanceTimersByTime(0) / await jest.runAllTimersAsync() instead of the real setTimeout)

2. jsdom's PointerEvent support: if your jsdom version doesnt define window.PointerEvent, fireEvent.pointerDown may not construct the event the way Radix's listener expects:

   if (!window.PointerEvent) {
     class PointerEvent extends MouseEvent {}
     // @ts-expect-error
     window.PointerEvent = PointerEvent;
   }

Also make sure you fire the event on document.body (or any node genuinely outside the dialog content), not on document itself — Radix compares event.target against the content ref, and document isnt a valid target for that check.

Combining both is usually what makes onPointerDownOutside / onInteractOutside testable with Jest + RTL.