From 034c368124db6648bce8bde7810b2df426b99b4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Thu, 9 Jan 2025 09:04:28 +0100
Subject: [PATCH 1/2] [test] Use vitest's `userEvent` implementation in browser
 tests

---
 .../src/accordion/root/AccordionRoot.test.tsx | 26 +++----
 .../collapsible/root/CollapsibleRoot.test.tsx |  4 +-
 .../src/dialog/popup/DialogPopup.test.tsx     | 40 ++++++-----
 .../react/src/dialog/root/DialogRoot.test.tsx | 24 ++-----
 .../react/src/field/root/FieldRoot.test.tsx   | 19 +++---
 .../menu/positioner/MenuPositioner.test.tsx   |  7 +-
 .../react/src/menu/root/MenuRoot.test.tsx     | 67 ++++++++++---------
 .../root/PreviewCardRoot.test.tsx             | 14 ++--
 .../react/src/select/item/SelectItem.test.tsx |  2 +-
 .../react/src/select/root/SelectRoot.test.tsx |  4 +-
 .../react/src/switch/root/SwitchRoot.test.tsx |  7 +-
 .../src/toggle-group/ToggleGroup.test.tsx     | 14 ++--
 packages/react/test/createRenderer.ts         | 41 +++++++++++-
 packages/react/test/describeConformance.tsx   | 10 +--
 14 files changed, 151 insertions(+), 128 deletions(-)

diff --git a/packages/react/src/accordion/root/AccordionRoot.test.tsx b/packages/react/src/accordion/root/AccordionRoot.test.tsx
index ed0d42860c..5ae2b72f36 100644
--- a/packages/react/src/accordion/root/AccordionRoot.test.tsx
+++ b/packages/react/src/accordion/root/AccordionRoot.test.tsx
@@ -65,7 +65,7 @@ describe('<Accordion.Root />', () => {
       expect(trigger).to.have.attribute('aria-expanded', 'false');
       expect(queryByText(PANEL_CONTENT_1)).to.equal(null);
 
-      await user.pointer({ keys: '[MouseLeft]', target: trigger });
+      await user.click(trigger);
 
       expect(trigger).to.have.attribute('aria-expanded', 'true');
       expect(trigger).to.have.attribute('data-panel-open');
@@ -73,7 +73,7 @@ describe('<Accordion.Root />', () => {
       expect(queryByText(PANEL_CONTENT_1)).toBeVisible();
       expect(queryByText(PANEL_CONTENT_1)).to.have.attribute('data-open');
 
-      await user.pointer({ keys: '[MouseLeft]', target: trigger });
+      await user.click(trigger);
 
       expect(trigger).to.have.attribute('aria-expanded', 'false');
       expect(queryByText(PANEL_CONTENT_1)).to.equal(null);
@@ -461,7 +461,7 @@ describe('<Accordion.Root />', () => {
 
         const [trigger1, , , trigger4] = getAllByRole('button');
 
-        await user.pointer({ keys: '[MouseLeft]', target: trigger4 });
+        await user.click(trigger4);
         expect(trigger4).toHaveFocus();
 
         await user.keyboard('[Home]');
@@ -528,8 +528,8 @@ describe('<Accordion.Root />', () => {
       expect(queryByText(PANEL_CONTENT_1)).to.equal(null);
       expect(queryByText(PANEL_CONTENT_2)).to.equal(null);
 
-      await user.pointer({ keys: '[MouseLeft]', target: trigger1 });
-      await user.pointer({ keys: '[MouseLeft]', target: trigger2 });
+      await user.click(trigger1);
+      await user.click(trigger2);
 
       expect(queryByText(PANEL_CONTENT_1)).to.have.attribute('data-open');
       expect(queryByText(PANEL_CONTENT_2)).to.have.attribute('data-open');
@@ -562,12 +562,12 @@ describe('<Accordion.Root />', () => {
       expect(trigger1).to.not.have.attribute('data-panel-open');
       expect(trigger2).to.not.have.attribute('data-panel-open');
 
-      await user.pointer({ keys: '[MouseLeft]', target: trigger1 });
+      await user.click(trigger1);
 
       expect(queryByText(PANEL_CONTENT_1)).to.have.attribute('data-open');
       expect(trigger1).to.have.attribute('data-panel-open');
 
-      await user.pointer({ keys: '[MouseLeft]', target: trigger2 });
+      await user.click(trigger2);
 
       expect(queryByText(PANEL_CONTENT_2)).to.have.attribute('data-open');
       expect(trigger2).to.have.attribute('data-panel-open');
@@ -679,12 +679,12 @@ describe('<Accordion.Root />', () => {
 
       expect(onValueChange.callCount).to.equal(0);
 
-      await user.pointer({ keys: '[MouseLeft]', target: trigger1 });
+      await user.click(trigger1);
 
       expect(onValueChange.callCount).to.equal(1);
       expect(onValueChange.args[0][0]).to.deep.equal([0]);
 
-      await user.pointer({ keys: '[MouseLeft]', target: trigger2 });
+      await user.click(trigger2);
 
       expect(onValueChange.callCount).to.equal(2);
       expect(onValueChange.args[1][0]).to.deep.equal([0, 1]);
@@ -714,12 +714,12 @@ describe('<Accordion.Root />', () => {
 
       expect(onValueChange.callCount).to.equal(0);
 
-      await user.pointer({ keys: '[MouseLeft]', target: trigger2 });
+      await user.click(trigger2);
 
       expect(onValueChange.callCount).to.equal(1);
       expect(onValueChange.args[0][0]).to.deep.equal(['two']);
 
-      await user.pointer({ keys: '[MouseLeft]', target: trigger1 });
+      await user.click(trigger1);
 
       expect(onValueChange.callCount).to.equal(2);
       expect(onValueChange.args[1][0]).to.deep.equal(['two', 'one']);
@@ -749,12 +749,12 @@ describe('<Accordion.Root />', () => {
 
       expect(onValueChange.callCount).to.equal(0);
 
-      await user.pointer({ keys: '[MouseLeft]', target: trigger1 });
+      await user.click(trigger1);
 
       expect(onValueChange.callCount).to.equal(1);
       expect(onValueChange.args[0][0]).to.deep.equal(['one']);
 
-      await user.pointer({ keys: '[MouseLeft]', target: trigger2 });
+      await user.click(trigger2);
 
       expect(onValueChange.callCount).to.equal(2);
       expect(onValueChange.args[1][0]).to.deep.equal(['two']);
diff --git a/packages/react/src/collapsible/root/CollapsibleRoot.test.tsx b/packages/react/src/collapsible/root/CollapsibleRoot.test.tsx
index f09c088559..598ed76963 100644
--- a/packages/react/src/collapsible/root/CollapsibleRoot.test.tsx
+++ b/packages/react/src/collapsible/root/CollapsibleRoot.test.tsx
@@ -83,7 +83,7 @@ describe('<Collapsible.Root />', () => {
       expect(trigger).to.have.attribute('aria-expanded', 'false');
       expect(queryByText(PANEL_CONTENT)).to.equal(null);
 
-      await user.pointer({ keys: '[MouseLeft]', target: trigger });
+      await user.click(trigger);
 
       expect(trigger).to.have.attribute('aria-expanded', 'true');
       expect(queryByText(PANEL_CONTENT)).to.not.equal(null);
@@ -91,7 +91,7 @@ describe('<Collapsible.Root />', () => {
       expect(queryByText(PANEL_CONTENT)).to.have.attribute('data-open');
       expect(trigger).to.have.attribute('data-panel-open');
 
-      await user.pointer({ keys: '[MouseLeft]', target: trigger });
+      await user.click(trigger);
 
       expect(trigger).to.not.have.attribute('aria-controls');
       expect(trigger).to.have.attribute('aria-expanded', 'false');
diff --git a/packages/react/src/dialog/popup/DialogPopup.test.tsx b/packages/react/src/dialog/popup/DialogPopup.test.tsx
index a561d77bfd..e694184980 100644
--- a/packages/react/src/dialog/popup/DialogPopup.test.tsx
+++ b/packages/react/src/dialog/popup/DialogPopup.test.tsx
@@ -282,27 +282,25 @@ describe('<Dialog.Popup />', () => {
       function App() {
         const [showNested, setShowNested] = React.useState(true);
         return (
-          <React.Fragment>
-            <button onClick={() => setShowNested(!showNested)}>toggle</button>
-            <Dialog.Root>
-              <Dialog.Trigger>Trigger 0</Dialog.Trigger>
-              <Dialog.Portal>
-                <Dialog.Popup data-testid="popup0">
-                  {showNested && (
-                    <Dialog.Root>
-                      <Dialog.Trigger>Trigger 1</Dialog.Trigger>
-                      <Dialog.Portal>
-                        <Dialog.Popup data-testid="popup1">
-                          <Dialog.Close>Close 1</Dialog.Close>
-                        </Dialog.Popup>
-                      </Dialog.Portal>
-                    </Dialog.Root>
-                  )}
-                  <Dialog.Close>Close 0</Dialog.Close>
-                </Dialog.Popup>
-              </Dialog.Portal>
-            </Dialog.Root>
-          </React.Fragment>
+          <Dialog.Root modal={false}>
+            <Dialog.Trigger>Trigger 0</Dialog.Trigger>
+            <Dialog.Portal>
+              <Dialog.Popup data-testid="popup0">
+                {showNested && (
+                  <Dialog.Root modal={false}>
+                    <Dialog.Trigger>Trigger 1</Dialog.Trigger>
+                    <Dialog.Portal>
+                      <Dialog.Popup data-testid="popup1">
+                        <button onClick={() => setShowNested(!showNested)}>toggle</button>
+                        <Dialog.Close>Close 1</Dialog.Close>
+                      </Dialog.Popup>
+                    </Dialog.Portal>
+                  </Dialog.Root>
+                )}
+                <Dialog.Close>Close 0</Dialog.Close>
+              </Dialog.Popup>
+            </Dialog.Portal>
+          </Dialog.Root>
         );
       }
 
diff --git a/packages/react/src/dialog/root/DialogRoot.test.tsx b/packages/react/src/dialog/root/DialogRoot.test.tsx
index 8840d04cc3..3a22159d8f 100644
--- a/packages/react/src/dialog/root/DialogRoot.test.tsx
+++ b/packages/react/src/dialog/root/DialogRoot.test.tsx
@@ -66,7 +66,7 @@ describe('<Dialog.Root />', () => {
         return (
           <div>
             <button onClick={() => setOpen(false)}>Close</button>
-            <Dialog.Root open={open}>
+            <Dialog.Root open={open} modal={false}>
               <Dialog.Portal>
                 <Dialog.Popup />
               </Dialog.Portal>
@@ -120,14 +120,15 @@ describe('<Dialog.Root />', () => {
           <div>
             {/* eslint-disable-next-line react/no-danger */}
             <style dangerouslySetInnerHTML={{ __html: style }} />
-            <button onClick={() => setOpen(false)}>Close</button>
             <Dialog.Root open={open}>
               <Dialog.Portal keepMounted>
                 <Dialog.Popup
                   className="animation-test-popup"
                   data-testid="popup"
                   onAnimationEnd={notifyAnimationFinished}
-                />
+                >
+                  <button onClick={() => setOpen(false)}>Close</button>
+                </Dialog.Popup>
               </Dialog.Portal>
             </Dialog.Root>
           </div>
@@ -514,11 +515,7 @@ describe('<Dialog.Root />', () => {
         expect(screen.queryByRole('dialog')).not.to.equal(null);
       });
 
-      const dialogPopup = screen.getByTestId('dialog-popup');
-      const dialogInternalBackdrop = dialogPopup.previousElementSibling
-        ?.previousElementSibling as HTMLElement;
-
-      await user.click(dialogInternalBackdrop);
+      await user.click(document.body);
 
       await waitFor(() => {
         expect(screen.queryByRole('dialog')).to.equal(null);
@@ -561,10 +558,7 @@ describe('<Dialog.Root />', () => {
         expect(screen.queryByRole('listbox')).not.to.equal(null);
       });
 
-      const selectPositioner = screen.getByTestId('select-positioner');
-      const selectInternalBackdrop = selectPositioner.previousElementSibling as HTMLElement;
-
-      await user.click(selectInternalBackdrop);
+      await user.click(document.body);
 
       await waitFor(() => {
         expect(screen.queryByRole('listbox')).to.equal(null);
@@ -573,11 +567,7 @@ describe('<Dialog.Root />', () => {
         expect(screen.queryByRole('dialog')).not.to.equal(null);
       });
 
-      const dialogPopup = screen.getByTestId('dialog-popup');
-      const dialogInternalBackdrop = dialogPopup.previousElementSibling
-        ?.previousElementSibling as HTMLElement;
-
-      await user.click(dialogInternalBackdrop);
+      await user.click(document.body);
 
       await waitFor(() => {
         expect(screen.queryByRole('dialog')).to.equal(null);
diff --git a/packages/react/src/field/root/FieldRoot.test.tsx b/packages/react/src/field/root/FieldRoot.test.tsx
index 56c6205bdf..f438c5d5c5 100644
--- a/packages/react/src/field/root/FieldRoot.test.tsx
+++ b/packages/react/src/field/root/FieldRoot.test.tsx
@@ -7,13 +7,10 @@ import { Slider } from '@base-ui-components/react/slider';
 import { RadioGroup } from '@base-ui-components/react/radio-group';
 import { Radio } from '@base-ui-components/react/radio';
 import { Select } from '@base-ui-components/react/select';
-import userEvent from '@testing-library/user-event';
 import { act, fireEvent, flushMicrotasks, screen, waitFor } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from '#test-utils';
 
-const user = userEvent.setup();
-
 describe('<Field.Root />', () => {
   const { render } = createRenderer();
 
@@ -530,7 +527,7 @@ describe('<Field.Root />', () => {
       });
 
       it('supports RadioGroup (blur)', async () => {
-        await render(
+        const { user } = await render(
           <Field.Root>
             <RadioGroup data-testid="group">
               <Radio.Root value="1" data-testid="control">
@@ -545,8 +542,8 @@ describe('<Field.Root />', () => {
         const group = screen.getByTestId('group');
         const control = screen.getByTestId('control');
 
-        await userEvent.tab(); // onto control
-        await userEvent.tab(); // onto last button
+        await user.tab(); // onto control
+        await user.tab(); // onto last button
 
         expect(group).to.have.attribute('data-touched', '');
         expect(control).to.have.attribute('data-touched', '');
@@ -681,10 +678,12 @@ describe('<Field.Root />', () => {
       });
 
       it('supports Select', async () => {
-        await render(
+        const { user } = await render(
           <Field.Root>
             <Select.Root>
-              <Select.Trigger data-testid="trigger" />
+              <Select.Trigger data-testid="trigger">
+                <Select.Value placeholder="Select" />
+              </Select.Trigger>
               <Select.Portal>
                 <Select.Positioner>
                   <Select.Popup>
@@ -701,7 +700,7 @@ describe('<Field.Root />', () => {
 
         expect(trigger).not.to.have.attribute('data-dirty');
 
-        await userEvent.click(trigger);
+        await user.click(trigger);
 
         await flushMicrotasks();
 
@@ -710,7 +709,7 @@ describe('<Field.Root />', () => {
         // Arrow Down to focus the Option 1
         await user.keyboard('{ArrowDown}');
 
-        await userEvent.click(option);
+        await user.click(option);
 
         await flushMicrotasks();
 
diff --git a/packages/react/src/menu/positioner/MenuPositioner.test.tsx b/packages/react/src/menu/positioner/MenuPositioner.test.tsx
index 3ece80ff0a..edc8d9f3bd 100644
--- a/packages/react/src/menu/positioner/MenuPositioner.test.tsx
+++ b/packages/react/src/menu/positioner/MenuPositioner.test.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import userEvent from '@testing-library/user-event';
 import { flushMicrotasks } from '@mui/internal-test-utils';
 import { Menu } from '@base-ui-components/react/menu';
 import { describeConformance, createRenderer, isJSDOM } from '#test-utils';
@@ -211,10 +210,8 @@ describe('<Menu.Positioner />', () => {
   });
 
   describe('prop: keepMounted', () => {
-    const user = userEvent.setup();
-
     it('when keepMounted=true, should keep the content mounted when closed', async () => {
-      const { getByRole, queryByRole } = await render(
+      const { getByRole, queryByRole, user } = await render(
         <Menu.Root modal={false}>
           <Menu.Trigger>Toggle</Menu.Trigger>
           <Menu.Portal keepMounted>
@@ -244,7 +241,7 @@ describe('<Menu.Positioner />', () => {
     });
 
     it('when keepMounted=false, should unmount the content when closed', async () => {
-      const { getByRole, queryByRole } = await render(
+      const { getByRole, queryByRole, user } = await render(
         <Menu.Root modal={false}>
           <Menu.Trigger>Toggle</Menu.Trigger>
           <Menu.Portal keepMounted={false}>
diff --git a/packages/react/src/menu/root/MenuRoot.test.tsx b/packages/react/src/menu/root/MenuRoot.test.tsx
index 662609a273..a2d2cc70b3 100644
--- a/packages/react/src/menu/root/MenuRoot.test.tsx
+++ b/packages/react/src/menu/root/MenuRoot.test.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { act, flushMicrotasks, waitFor, screen } from '@mui/internal-test-utils';
+import userEvent from '@testing-library/user-event';
 import { DirectionProvider } from '@base-ui-components/react/direction-provider';
 import { Menu } from '@base-ui-components/react/menu';
-import userEvent from '@testing-library/user-event';
 import { spy } from 'sinon';
 import { createRenderer, isJSDOM } from '#test-utils';
 
@@ -13,11 +13,10 @@ describe('<Menu.Root />', () => {
   });
 
   const { render } = createRenderer();
-  const user = userEvent.setup();
 
   describe('keyboard navigation', () => {
     it('changes the highlighted item using the arrow keys', async () => {
-      const { getByRole, getByTestId } = await render(
+      const { getByRole, getByTestId, user } = await render(
         <Menu.Root>
           <Menu.Trigger>Toggle</Menu.Trigger>
           <Menu.Portal>
@@ -37,7 +36,7 @@ describe('<Menu.Root />', () => {
         trigger.focus();
       });
 
-      await userEvent.keyboard('[Enter]');
+      await user.keyboard('[Enter]');
 
       const item1 = getByTestId('item-1');
       const item2 = getByTestId('item-2');
@@ -47,24 +46,24 @@ describe('<Menu.Root />', () => {
         expect(item1).toHaveFocus();
       });
 
-      await userEvent.keyboard('{ArrowDown}');
+      await user.keyboard('{ArrowDown}');
       await waitFor(() => {
         expect(item2).toHaveFocus();
       });
 
-      await userEvent.keyboard('{ArrowDown}');
+      await user.keyboard('{ArrowDown}');
       await waitFor(() => {
         expect(item3).toHaveFocus();
       });
 
-      await userEvent.keyboard('{ArrowUp}');
+      await user.keyboard('{ArrowUp}');
       await waitFor(() => {
         expect(item2).toHaveFocus();
       });
     });
 
     it('changes the highlighted item using the Home and End keys', async () => {
-      const { getByRole, getByTestId } = await render(
+      const { getByRole, getByTestId, user } = await render(
         <Menu.Root>
           <Menu.Trigger>Toggle</Menu.Trigger>
           <Menu.Portal>
@@ -84,7 +83,7 @@ describe('<Menu.Root />', () => {
         trigger.focus();
       });
 
-      await userEvent.keyboard('[Enter]');
+      await user.keyboard('[Enter]');
       const item1 = getByTestId('item-1');
       const item3 = getByTestId('item-3');
 
@@ -92,19 +91,19 @@ describe('<Menu.Root />', () => {
         expect(item1).toHaveFocus();
       });
 
-      await userEvent.keyboard('{End}');
+      await user.keyboard('{End}');
       await waitFor(() => {
         expect(item3).toHaveFocus();
       });
 
-      await userEvent.keyboard('{Home}');
+      await user.keyboard('{Home}');
       await waitFor(() => {
         expect(item1).toHaveFocus();
       });
     });
 
     it('includes disabled items during keyboard navigation', async () => {
-      const { getByRole, getByTestId } = await render(
+      const { getByRole, getByTestId, user } = await render(
         <Menu.Root>
           <Menu.Trigger>Toggle</Menu.Trigger>
           <Menu.Portal>
@@ -125,7 +124,7 @@ describe('<Menu.Root />', () => {
         trigger.focus();
       });
 
-      await userEvent.keyboard('[Enter]');
+      await user.keyboard('[Enter]');
 
       const item1 = getByTestId('item-1');
       const item2 = getByTestId('item-2');
@@ -134,7 +133,7 @@ describe('<Menu.Root />', () => {
         expect(item1).toHaveFocus();
       });
 
-      await userEvent.keyboard('{ArrowDown}');
+      await user.keyboard('{ArrowDown}');
 
       await waitFor(() => {
         expect(item2).toHaveFocus();
@@ -151,7 +150,7 @@ describe('<Menu.Root />', () => {
           skip();
         }
 
-        const { getByText, getAllByRole } = await render(
+        const { getByText, getAllByRole, user } = await render(
           <Menu.Root open>
             <Menu.Portal>
               <Menu.Positioner>
@@ -195,7 +194,7 @@ describe('<Menu.Root />', () => {
           skip();
         }
 
-        const { getByRole, getAllByRole } = await render(
+        const { getByRole, getAllByRole, user } = await render(
           <Menu.Root>
             <Menu.Trigger>Toggle</Menu.Trigger>
             <Menu.Portal>
@@ -251,7 +250,7 @@ describe('<Menu.Root />', () => {
           skip();
         }
 
-        const { getByText, getAllByRole } = await render(
+        const { getByText, getAllByRole, user } = await render(
           <Menu.Root open>
             <Menu.Portal>
               <Menu.Positioner>
@@ -297,6 +296,9 @@ describe('<Menu.Root />', () => {
           skip();
         }
 
+        // can't use vitest userEvent type method because inputting diacritic characters depend on the keyboard layout
+        const user = userEvent.setup();
+
         const { getByText, getAllByRole } = await render(
           <Menu.Root open>
             <Menu.Portal>
@@ -338,6 +340,9 @@ describe('<Menu.Root />', () => {
           skip();
         }
 
+        // can't use vitest userEvent type method because inputting diacritic characters depend on the keyboard layout
+        const user = userEvent.setup();
+
         const { getByText, getAllByRole } = await render(
           <Menu.Root open>
             <Menu.Portal>
@@ -377,7 +382,7 @@ describe('<Menu.Root />', () => {
 
         const handleClick = spy();
 
-        const { getAllByRole } = await render(
+        const { getAllByRole, user } = await render(
           <Menu.Root open>
             <Menu.Portal>
               <Menu.Positioner>
@@ -418,7 +423,7 @@ describe('<Menu.Root />', () => {
       ] as const
     ).forEach(([orientation, direction, openKey, closeKey]) => {
       it(`opens a nested menu of a ${orientation} ${direction.toUpperCase()} menu with ${openKey} key and closes it with ${closeKey}`, async () => {
-        const { getByTestId, queryByTestId } = await render(
+        const { getByTestId, queryByTestId, user } = await render(
           <DirectionProvider direction={direction}>
             <Menu.Root open orientation={orientation}>
               <Menu.Portal>
@@ -489,14 +494,14 @@ describe('<Menu.Root />', () => {
     }
 
     it('focuses the first item after the menu is opened by keyboard', async () => {
-      const { getAllByRole, getByRole } = await render(<Test />);
+      const { getAllByRole, getByRole, user } = await render(<Test />);
 
       const trigger = getByRole('button', { name: 'Toggle' });
       await act(async () => {
         trigger.focus();
       });
 
-      await userEvent.keyboard('[Enter]');
+      await user.keyboard('[Enter]');
 
       const [firstItem, ...otherItems] = getAllByRole('menuitem');
       await waitFor(() => {
@@ -508,7 +513,7 @@ describe('<Menu.Root />', () => {
     });
 
     it('focuses the first item when down arrow key opens the menu', async () => {
-      const { getByRole, getAllByRole } = await render(<Test />);
+      const { getByRole, getAllByRole, user } = await render(<Test />);
 
       const trigger = getByRole('button', { name: 'Toggle' });
       await act(async () => {
@@ -526,7 +531,7 @@ describe('<Menu.Root />', () => {
     });
 
     it('focuses the last item when up arrow key opens the menu', async () => {
-      const { getByRole, getAllByRole } = await render(<Test />);
+      const { getByRole, getAllByRole, user } = await render(<Test />);
 
       const trigger = getByRole('button', { name: 'Toggle' });
 
@@ -548,7 +553,7 @@ describe('<Menu.Root />', () => {
     });
 
     it('focuses the trigger after the menu is closed', async () => {
-      const { getByRole } = await render(
+      const { getByRole, user } = await render(
         <div>
           <input type="text" />
           <Menu.Root>
@@ -580,7 +585,7 @@ describe('<Menu.Root />', () => {
         skip();
       }
 
-      const { getByRole } = await render(
+      const { getByRole, user } = await render(
         <div>
           <input type="text" />
           <Menu.Root>
@@ -611,7 +616,7 @@ describe('<Menu.Root />', () => {
 
   describe('prop: closeParentOnEsc', () => {
     it('closes the parent menu when the Escape key is pressed by default', async () => {
-      const { getByRole, queryByRole } = await render(
+      const { getByRole, queryByRole, user } = await render(
         <Menu.Root>
           <Menu.Trigger>Open</Menu.Trigger>
           <Menu.Portal>
@@ -662,7 +667,7 @@ describe('<Menu.Root />', () => {
     });
 
     it('does not close the parent menu when the Escape key is pressed if `closeParentOnEsc=false`', async () => {
-      const { getByRole, queryAllByRole } = await render(
+      const { getByRole, queryAllByRole, user } = await render(
         <Menu.Root>
           <Menu.Trigger>Open</Menu.Trigger>
           <Menu.Portal>
@@ -740,7 +745,7 @@ describe('<Menu.Root />', () => {
         );
       }
 
-      await render(<Test />);
+      const { user } = await render(<Test />);
 
       const closeButton = screen.getByText('Close');
       await user.click(closeButton);
@@ -800,7 +805,7 @@ describe('<Menu.Root />', () => {
         );
       }
 
-      await render(<Test />);
+      const { user } = await render(<Test />);
 
       const closeButton = screen.getByText('Close');
       await user.click(closeButton);
@@ -815,7 +820,7 @@ describe('<Menu.Root />', () => {
 
   describe('prop: modal', () => {
     it('should render an internal backdrop when `true`', async () => {
-      await render(
+      const { user } = await render(
         <div>
           <Menu.Root>
             <Menu.Trigger>Open</Menu.Trigger>
@@ -846,7 +851,7 @@ describe('<Menu.Root />', () => {
     });
 
     it('should not render an internal backdrop when `false`', async () => {
-      await render(
+      const { user } = await render(
         <div>
           <Menu.Root modal={false}>
             <Menu.Trigger>Open</Menu.Trigger>
diff --git a/packages/react/src/preview-card/root/PreviewCardRoot.test.tsx b/packages/react/src/preview-card/root/PreviewCardRoot.test.tsx
index 70aebc605f..2d178d037d 100644
--- a/packages/react/src/preview-card/root/PreviewCardRoot.test.tsx
+++ b/packages/react/src/preview-card/root/PreviewCardRoot.test.tsx
@@ -171,13 +171,16 @@ describe('<PreviewCard.Root />', () => {
 
       function Test() {
         const [open, setOpen] = React.useState(true);
+        const anchor = React.useRef<HTMLButtonElement>(null);
 
         return (
           <div>
-            <button onClick={() => setOpen(false)}>Close</button>
+            <button onClick={() => setOpen(false)} ref={anchor}>
+              Close
+            </button>
             <PreviewCard.Root open={open}>
               <PreviewCard.Portal>
-                <PreviewCard.Positioner>
+                <PreviewCard.Positioner anchor={anchor}>
                   <PreviewCard.Popup>Content</PreviewCard.Popup>
                 </PreviewCard.Positioner>
               </PreviewCard.Portal>
@@ -226,15 +229,18 @@ describe('<PreviewCard.Root />', () => {
         `;
 
         const [open, setOpen] = React.useState(true);
+        const anchor = React.useRef<HTMLButtonElement>(null);
 
         return (
           <div>
             {/* eslint-disable-next-line react/no-danger */}
             <style dangerouslySetInnerHTML={{ __html: style }} />
-            <button onClick={() => setOpen(false)}>Close</button>
+            <button onClick={() => setOpen(false)} ref={anchor}>
+              Close
+            </button>
             <PreviewCard.Root open={open}>
               <PreviewCard.Portal keepMounted>
-                <PreviewCard.Positioner data-testid="positioner">
+                <PreviewCard.Positioner data-testid="positioner" anchor={anchor}>
                   <PreviewCard.Popup
                     className="animation-test-popup"
                     onAnimationEnd={notifyAnimationFinished}
diff --git a/packages/react/src/select/item/SelectItem.test.tsx b/packages/react/src/select/item/SelectItem.test.tsx
index 1d2b1c64a4..1d2578aa50 100644
--- a/packages/react/src/select/item/SelectItem.test.tsx
+++ b/packages/react/src/select/item/SelectItem.test.tsx
@@ -152,7 +152,7 @@ describe('<Select.Item />', () => {
     const { user } = await render(
       <Select.Root>
         <Select.Trigger data-testid="trigger">
-          <Select.Value data-testid="value" />
+          <Select.Value data-testid="value" placeholder="Select" />
         </Select.Trigger>
         <Select.Portal>
           <Select.Positioner>
diff --git a/packages/react/src/select/root/SelectRoot.test.tsx b/packages/react/src/select/root/SelectRoot.test.tsx
index 98cf1c40b3..d363105de3 100644
--- a/packages/react/src/select/root/SelectRoot.test.tsx
+++ b/packages/react/src/select/root/SelectRoot.test.tsx
@@ -128,7 +128,7 @@ describe('<Select.Root />', () => {
             }}
           >
             <Select.Trigger data-testid="trigger">
-              <Select.Value />
+              <Select.Value placeholder="Select a value" />
             </Select.Trigger>
             <Select.Portal>
               <Select.Positioner>
@@ -315,7 +315,7 @@ describe('<Select.Root />', () => {
       const { user } = await render(
         <Select.Root onOpenChange={handleOpenChange}>
           <Select.Trigger data-testid="trigger">
-            <Select.Value />
+            <Select.Value placeholder="Select" />
           </Select.Trigger>
           <Select.Portal>
             <Select.Positioner>
diff --git a/packages/react/src/switch/root/SwitchRoot.test.tsx b/packages/react/src/switch/root/SwitchRoot.test.tsx
index dc759610da..3850d9ef95 100644
--- a/packages/react/src/switch/root/SwitchRoot.test.tsx
+++ b/packages/react/src/switch/root/SwitchRoot.test.tsx
@@ -3,7 +3,6 @@ import { expect } from 'chai';
 import { spy } from 'sinon';
 import { act, fireEvent, screen } from '@mui/internal-test-utils';
 import { Switch } from '@base-ui-components/react/switch';
-import { userEvent } from '@testing-library/user-event';
 import { describeConformance, createRenderer, isJSDOM } from '#test-utils';
 
 describe('<Switch.Root />', () => {
@@ -167,10 +166,8 @@ describe('<Switch.Root />', () => {
   });
 
   describe('form handling', () => {
-    const user = userEvent.setup();
-
     it('should toggle the switch when a parent label is clicked', async () => {
-      const { getByTestId, getByRole } = await render(
+      const { getByTestId, getByRole, user } = await render(
         <label data-testid="label">
           <Switch.Root />
           Toggle
@@ -188,7 +185,7 @@ describe('<Switch.Root />', () => {
     });
 
     it('should toggle the switch when a linked label is clicked', async () => {
-      const { getByTestId, getByRole } = await render(
+      const { getByTestId, getByRole, user } = await render(
         <div>
           <label htmlFor="test-switch" data-testid="label">
             Toggle
diff --git a/packages/react/src/toggle-group/ToggleGroup.test.tsx b/packages/react/src/toggle-group/ToggleGroup.test.tsx
index c098c973da..a00a10564b 100644
--- a/packages/react/src/toggle-group/ToggleGroup.test.tsx
+++ b/packages/react/src/toggle-group/ToggleGroup.test.tsx
@@ -42,13 +42,13 @@ describe('<ToggleGroup />', () => {
       expect(button1).to.have.attribute('aria-pressed', 'false');
       expect(button2).to.have.attribute('aria-pressed', 'false');
 
-      await user.pointer({ keys: '[MouseLeft]', target: button1 });
+      await user.click(button1);
 
       expect(button1).to.have.attribute('aria-pressed', 'true');
       expect(button1).to.have.attribute('data-pressed');
       expect(button2).to.have.attribute('aria-pressed', 'false');
 
-      await user.pointer({ keys: '[MouseLeft]', target: button2 });
+      await user.click(button2);
 
       expect(button2).to.have.attribute('aria-pressed', 'true');
       expect(button2).to.have.attribute('data-pressed');
@@ -69,7 +69,7 @@ describe('<ToggleGroup />', () => {
       expect(button2).to.have.attribute('data-pressed');
       expect(button1).to.have.attribute('aria-pressed', 'false');
 
-      await user.pointer({ keys: '[MouseLeft]', target: button1 });
+      await user.click(button1);
 
       expect(button1).to.have.attribute('aria-pressed', 'true');
       expect(button1).to.have.attribute('data-pressed');
@@ -192,7 +192,7 @@ describe('<ToggleGroup />', () => {
       expect(button1).to.have.attribute('aria-pressed', 'true');
       expect(button2).to.have.attribute('aria-pressed', 'false');
 
-      await user.pointer({ keys: '[MouseLeft]', target: button2 });
+      await user.click(button2);
 
       expect(button1).to.have.attribute('aria-pressed', 'true');
       expect(button2).to.have.attribute('aria-pressed', 'true');
@@ -211,7 +211,7 @@ describe('<ToggleGroup />', () => {
       expect(button1).to.have.attribute('aria-pressed', 'true');
       expect(button2).to.have.attribute('aria-pressed', 'false');
 
-      await user.pointer({ keys: '[MouseLeft]', target: button2 });
+      await user.click(button2);
 
       expect(button1).to.have.attribute('aria-pressed', 'false');
       expect(button2).to.have.attribute('aria-pressed', 'true');
@@ -326,12 +326,12 @@ describe('<ToggleGroup />', () => {
 
       expect(onValueChange.callCount).to.equal(0);
 
-      await user.pointer({ keys: '[MouseLeft]', target: button1 });
+      await user.click(button1);
 
       expect(onValueChange.callCount).to.equal(1);
       expect(onValueChange.args[0][0]).to.deep.equal(['one']);
 
-      await user.pointer({ keys: '[MouseLeft]', target: button2 });
+      await user.click(button2);
 
       expect(onValueChange.callCount).to.equal(2);
       expect(onValueChange.args[1][0]).to.deep.equal(['two']);
diff --git a/packages/react/test/createRenderer.ts b/packages/react/test/createRenderer.ts
index d0e237f2c8..27afdc93b1 100644
--- a/packages/react/test/createRenderer.ts
+++ b/packages/react/test/createRenderer.ts
@@ -7,12 +7,19 @@ import {
   MuiRenderResult,
   act,
 } from '@mui/internal-test-utils';
+import { type UserEvent as VitestUserEvent } from '@vitest/browser/context';
+import { type UserEvent as RtlUserEvent } from '@testing-library/user-event';
+import { isJSDOM } from './utils';
+
+export type BaseUIRenderResult = Omit<MuiRenderResult, 'user'> & {
+  user: VitestUserEvent | RtlUserEvent;
+};
 
 type BaseUITestRenderer = Omit<Renderer, 'render'> & {
   render: (
     element: React.ReactElement<DataAttributes>,
     options?: RenderOptions,
-  ) => Promise<MuiRenderResult>;
+  ) => Promise<BaseUIRenderResult>;
 };
 
 interface DataAttributes {
@@ -23,13 +30,41 @@ export function createRenderer(globalOptions?: CreateRendererOptions): BaseUITes
   const createRendererResult = sharedCreateRenderer(globalOptions);
   const { render: originalRender } = createRendererResult;
 
-  const render = async (element: React.ReactElement<DataAttributes>, options?: RenderOptions) =>
-    act(async () => {
+  const render = async (element: React.ReactElement<DataAttributes>, options?: RenderOptions) => {
+    const renderResult = await act(async () => {
       const result = await originalRender(element, options);
       await flushMicrotasks();
       return result;
     });
 
+    if (!isJSDOM) {
+      const { userEvent: vitestUserEvent } = await import('@vitest/browser/context');
+
+      const originalUser = vitestUserEvent.setup();
+
+      const proxyHandler: ProxyHandler<any> = {
+        get: (target, prop) => {
+          if (typeof target[prop] !== 'function') {
+            return target[prop];
+          }
+
+          return async (...args: unknown[]) => {
+            await act(async () => target[prop](...args));
+          };
+        },
+      };
+
+      const patchedUser = new Proxy(originalUser, proxyHandler);
+
+      return {
+        ...renderResult,
+        user: patchedUser,
+      };
+    }
+
+    return renderResult;
+  };
+
   return {
     ...createRendererResult,
     render,
diff --git a/packages/react/test/describeConformance.tsx b/packages/react/test/describeConformance.tsx
index 2cc5b51095..65df24df21 100644
--- a/packages/react/test/describeConformance.tsx
+++ b/packages/react/test/describeConformance.tsx
@@ -1,14 +1,10 @@
 import * as React from 'react';
-import {
-  ConformanceOptions,
-  MuiRenderResult,
-  RenderOptions,
-  createDescribe,
-} from '@mui/internal-test-utils';
+import { ConformanceOptions, RenderOptions, createDescribe } from '@mui/internal-test-utils';
 import { testPropForwarding } from './conformanceTests/propForwarding';
 import { testRefForwarding } from './conformanceTests/refForwarding';
 import { testRenderProp } from './conformanceTests/renderProp';
 import { testClassName } from './conformanceTests/className';
+import { BaseUIRenderResult } from './createRenderer';
 
 export type ConformantComponentProps = {
   render?: React.ReactElement<unknown> | ((props: Record<string, unknown>) => React.ReactNode);
@@ -26,7 +22,7 @@ export interface BaseUiConformanceTestsOptions
       string | React.JSXElementConstructor<any>
     >,
     options?: RenderOptions | undefined,
-  ) => Promise<MuiRenderResult> | MuiRenderResult;
+  ) => Promise<BaseUIRenderResult> | BaseUIRenderResult;
   skip?: (keyof typeof fullSuite)[];
   testRenderPropWith?: keyof React.JSX.IntrinsicElements;
 }

From 22d74a25f37495821ebc9433fa5291e5d17e7269 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dudak?= <michal@mui.com>
Date: Thu, 9 Jan 2025 09:42:35 +0100
Subject: [PATCH 2/2] Lint

---
 packages/react/src/field/root/FieldRoot.test.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react/src/field/root/FieldRoot.test.tsx b/packages/react/src/field/root/FieldRoot.test.tsx
index f438c5d5c5..79d5d9c949 100644
--- a/packages/react/src/field/root/FieldRoot.test.tsx
+++ b/packages/react/src/field/root/FieldRoot.test.tsx
@@ -247,7 +247,6 @@ describe('<Field.Root />', () => {
           </Field.Root>,
         );
 
-        // eslint-disable-next-line testing-library/no-node-access
         const input = container.querySelector<HTMLInputElement>('input')!;
         const thumb = screen.getByTestId('thumb');
 
@@ -648,7 +647,6 @@ describe('<Field.Root />', () => {
         );
 
         const root = screen.getByTestId('root');
-        // eslint-disable-next-line testing-library/no-node-access
         const input = container.querySelector<HTMLInputElement>('input')!;
 
         expect(root).not.to.have.attribute('data-dirty');