From e7a1c9b54b8af06d3f4da9f873911667eb505834 Mon Sep 17 00:00:00 2001
From: Kevin Ji <1146876+kevinji@users.noreply.github.com>
Date: Wed, 1 Jun 2022 00:12:50 -0700
Subject: [PATCH] [base] Remove @mui/system in tests (#32945)

---
 .../test/integration/SelectUnstyled.test.tsx  | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/mui-base/test/integration/SelectUnstyled.test.tsx b/packages/mui-base/test/integration/SelectUnstyled.test.tsx
index 300aea9bd8b016..f4ed224e98423c 100644
--- a/packages/mui-base/test/integration/SelectUnstyled.test.tsx
+++ b/packages/mui-base/test/integration/SelectUnstyled.test.tsx
@@ -2,8 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { act, createRenderer, fireEvent } from 'test/utils';
 import OptionUnstyled from '@mui/base/OptionUnstyled';
-import SelectUnstyled from '@mui/base/SelectUnstyled';
-import { styled } from '@mui/system';
+import SelectUnstyled, { SelectUnstyledListboxSlotProps } from '@mui/base/SelectUnstyled';
 
 describe('<SelectUnstyled> integration', () => {
   const { render } = createRenderer();
@@ -13,13 +12,25 @@ describe('<SelectUnstyled> integration', () => {
       this.skip();
     }
 
-    const SelectListbox = styled('ul')({
-      maxHeight: '100px',
-      overflow: 'auto',
+    const SelectListbox = React.forwardRef(function SelectListbox(
+      props: SelectUnstyledListboxSlotProps<string>,
+      ref: React.ForwardedRef<HTMLUListElement>,
+    ) {
+      const { ownerState, ...other } = props;
+      return <ul {...other} ref={ref} style={{ maxHeight: '100px', overflow: 'auto' }} />;
     });
 
-    const Option = styled(OptionUnstyled)({
-      height: '50px',
+    const Option = React.forwardRef(function Option(
+      props: { value: string; children?: React.ReactNode },
+      ref: React.Ref<HTMLLIElement>,
+    ) {
+      return (
+        <OptionUnstyled
+          {...props}
+          ref={ref}
+          componentsProps={{ root: { style: { height: '50px' } } }}
+        />
+      );
     });
 
     const { getByRole } = render(