fix(react/utils): check if env is jsdom (#2740)

.changeset/tasty-islands-sing.md

@@ -0,0 +1,5 @@
+---
+"@floating-ui/react": patch
+---
+
+fix(utils): check if env is JSDOM for `isVirtualPointerEvent`. Fixes issue when testing `visibleOnly` prop in `useFocus`.

packages/react/src/utils.ts

@@ -88,6 +88,7 @@ export function isVirtualClick(event: MouseEvent | PointerEvent): boolean {
 }
 
 export function isVirtualPointerEvent(event: PointerEvent) {
+  if (isJSDOM()) return false;
   return (
     (!isAndroid() && event.width === 0 && event.height === 0) ||
     (isAndroid() &&
@@ -121,6 +122,10 @@ export function isMac() {
   );
 }
 
+export function isJSDOM() {
+  return getUserAgent().includes('jsdom/');
+}
+
 export function isMouseLikePointerType(
   pointerType: string | undefined,
   strict?: boolean,

packages/react/test/unit/useFocus.test.tsx

@@ -175,3 +175,42 @@ test('reason string', async () => {
   await act(async () => {});
   fireEvent.focusOut(button);
 });
+
+describe('visibleOnly prop', () => {
+  function App({visibleOnly}: {visibleOnly: boolean}) {
+    const [isOpen, setIsOpen] = useState(false);
+    const {refs, context} = useFloating({
+      open: isOpen,
+      onOpenChange: setIsOpen,
+    });
+
+    const focus = useFocus(context, {visibleOnly});
+
+    const {getReferenceProps, getFloatingProps} = useInteractions([focus]);
+
+    return (
+      <>
+        <button ref={refs.setReference} {...getReferenceProps()} />
+        {isOpen && (
+          <div role="tooltip" ref={refs.setFloating} {...getFloatingProps()} />
+        )}
+      </>
+    );
+  }
+
+  test('true', async () => {
+    render(<App visibleOnly />);
+    const button = screen.getByRole('button');
+    await userEvent.click(button);
+    await act(async () => {});
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  });
+
+  test('false', async () => {
+    render(<App visibleOnly={false} />);
+    const button = screen.getByRole('button');
+    await userEvent.click(button);
+    await act(async () => {});
+    expect(screen.queryByRole('tooltip')).toBeInTheDocument();
+  });
+});