Bump karma-webpack to ^5.0.1

package.json

@@ -168,7 +168,7 @@
     "karma-firefox-launcher": "^2.1.3",
     "karma-mocha": "^2.0.1",
     "karma-sourcemap-loader": "^0.4.0",
-    "karma-webpack": "^5.0.0",
+    "karma-webpack": "^5.0.1",
     "lerna": "^8.1.8",
     "lodash": "^4.17.21",
     "markdownlint-cli2": "^0.13.0",

packages/mui-base/src/Menu/Menu.test.tsx

@@ -16,6 +16,12 @@ import { Popper } from '@mui/base/Popper';
 import { MenuProvider, useMenu } from '@mui/base/useMenu';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
+function createAnchor(element = 'div') {
+  const anchor = document.createElement(element);
+  document.body.appendChild(anchor);
+  return anchor;
+}
+
 const testContext: DropdownContextValue = {
   dispatch: () => {},
   popupId: 'menu-popup',
@@ -150,7 +156,7 @@ describe('<Menu />', () => {
           disabledItemsFocusable: false,
         });
 
-        const anchorEl = triggerElement ?? document.createElement('div');
+        const anchorEl = triggerElement ?? createAnchor();
 
         return (
           <Popper open={open} anchorEl={anchorEl}>

packages/mui-base/src/Popper/Popper.test.tsx

@@ -4,11 +4,17 @@ import { createRenderer, screen } from '@mui/internal-test-utils';
 import { Popper, popperClasses } from '@mui/base/Popper';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 
+function createAnchor(element = 'div') {
+  const anchor = document.createElement(element);
+  document.body.appendChild(anchor);
+  return anchor;
+}
+
 describe('<Popper />', () => {
   const { render } = createRenderer();
 
   const defaultProps = {
-    anchorEl: () => document.createElement('svg'),
+    anchorEl: () => createAnchor('svg'),
     children: <span>Hello World</span>,
     open: true,
   };
@@ -29,13 +35,7 @@ describe('<Popper />', () => {
     const CustomComponent = React.forwardRef<HTMLDivElement, any>(({ ownerState }, ref) => (
       <div ref={ref} data-testid="foo" id={ownerState.id} />
     ));
-    render(
-      <Popper
-        anchorEl={() => document.createElement('div')}
-        open
-        slots={{ root: CustomComponent }}
-      />,
-    );
+    render(<Popper anchorEl={() => createAnchor()} open slots={{ root: CustomComponent }} />);
 
     expect(screen.getByTestId('foo')).to.not.have.attribute('id', 'id');
   });

packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx

@@ -164,9 +164,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
     let resizeObserver: ResizeObserver;
 
     if (typeof ResizeObserver !== 'undefined') {
-      resizeObserver = new ResizeObserver(
-        process.env.NODE_ENV === 'test' ? rAFHandleResize : handleResize,
-      );
+      resizeObserver = new ResizeObserver(rAFHandleResize);
       resizeObserver.observe(input);
     }
 

packages/mui-joy/src/List/List.test.tsx

@@ -10,6 +10,12 @@ import Select from '@mui/joy/Select';
 import RadioGroup from '@mui/joy/RadioGroup';
 import describeConformance from '../../test/describeConformance';
 
+function createAnchor(element = 'div') {
+  const anchor = document.createElement(element);
+  document.body.appendChild(anchor);
+  return anchor;
+}
+
 describe('Joy <List />', () => {
   const { render } = createRenderer();
 
@@ -100,7 +106,7 @@ describe('Joy <List />', () => {
   });
 
   describe('Menu - integration', () => {
-    const element = document.createElement('div');
+    const element = createAnchor();
     element.setAttribute('aria-controls', 'test');
 
     it('should have role="group" inside Menu', () => {

packages/mui-joy/src/Menu/Menu.test.tsx

@@ -11,13 +11,19 @@ import MenuItem from '@mui/joy/MenuItem';
 import MenuButton from '@mui/joy/MenuButton';
 import describeConformance from '../../test/describeConformance';
 
+function createAnchor(element = 'div') {
+  const anchor = document.createElement(element);
+  document.body.appendChild(anchor);
+  return anchor;
+}
+
 const testContext: DropdownContextValue = {
   dispatch: () => {},
   popupId: 'menu-popup',
   registerPopup: () => {},
   registerTrigger: () => {},
   state: { open: true, changeReason: null },
-  triggerElement: document.createElement('div'),
+  triggerElement: createAnchor(),
 };
 
 describe('Joy <Menu />', () => {
@@ -46,7 +52,7 @@ describe('Joy <Menu />', () => {
     ],
   }));
 
-  const anchorEl = document.createElement('div');
+  const anchorEl = createAnchor();
   anchorEl.setAttribute('aria-controls', 'test');
 
   it('should render with `ul` by default', () => {

packages/mui-joy/src/utils/useSlot.test.tsx

@@ -6,6 +6,12 @@ import { styled } from '../styles';
 import { SlotProps } from './types';
 import useSlot from './useSlot';
 
+function createAnchor(element = 'div') {
+  const anchor = document.createElement(element);
+  document.body.appendChild(anchor);
+  return anchor;
+}
+
 describe('useSlot', () => {
   const { render } = createRenderer();
 
@@ -158,7 +164,7 @@ describe('useSlot', () => {
         ownerState: {},
         additionalProps: {
           open: true, // !!force the popper to always visible for testing
-          anchorEl: () => document.createElement('div'),
+          anchorEl: () => createAnchor(),
         },
         internalForwardedProps: {
           slots: { root: ItemRoot },
@@ -232,7 +238,7 @@ describe('useSlot', () => {
         additionalProps: {
           open: true, // !!force the popper to always visible for testing
           role: 'menu',
-          anchorEl: () => document.createElement('div'),
+          anchorEl: () => createAnchor(),
         },
         internalForwardedProps: {
           slots: { root: ItemListbox },

packages/mui-material/src/Menu/Menu.test.js

@@ -14,10 +14,16 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
 import { paperClasses } from '../Paper';
 
+function createAnchor() {
+  const anchor = document.createElement('div');
+  document.body.appendChild(anchor);
+  return anchor;
+}
+
 describe('<Menu />', () => {
   const { render } = createRenderer({ clock: 'fake' });
 
-  describeConformance(<Menu anchorEl={() => document.createElement('div')} open />, () => ({
+  describeConformance(<Menu anchorEl={() => createAnchor()} open />, () => ({
     classes,
     inheritComponent: Popover,
     render,
@@ -49,7 +55,7 @@ describe('<Menu />', () => {
         const handleEntering = spy();
         render(
           <Menu
-            anchorEl={document.createElement('div')}
+            anchorEl={createAnchor()}
             open
             TransitionProps={{
               onEnter: handleEnter,
@@ -79,7 +85,7 @@ describe('<Menu />', () => {
               onExit: handleExit,
               onExiting: handleExiting,
             }}
-            anchorEl={document.createElement('div')}
+            anchorEl={createAnchor()}
             open
           />,
         );
@@ -97,13 +103,7 @@ describe('<Menu />', () => {
   });
 
   it('should pass `classes.paper` to the Paper', () => {
-    render(
-      <Menu
-        anchorEl={document.createElement('div')}
-        open
-        PaperProps={{ 'data-testid': 'paper' }}
-      />,
-    );
+    render(<Menu anchorEl={createAnchor()} open PaperProps={{ 'data-testid': 'paper' }} />);
 
     expect(screen.getByTestId('paper')).to.have.class(classes.paper);
   });
@@ -112,7 +112,7 @@ describe('<Menu />', () => {
     it('should be able to change the Popover style', () => {
       render(
         <Menu
-          anchorEl={document.createElement('div')}
+          anchorEl={createAnchor()}
           open
           PaperProps={{ 'data-testid': 'paper' }}
           PopoverClasses={{ paper: 'bar' }}
@@ -125,7 +125,7 @@ describe('<Menu />', () => {
     it('should be able to change the Popover root element style when Menu classes prop is also provided', () => {
       render(
         <Menu
-          anchorEl={document.createElement('div')}
+          anchorEl={createAnchor()}
           open
           data-testid="popover"
           classes={{ paper: 'bar' }}
@@ -143,7 +143,7 @@ describe('<Menu />', () => {
 
       render(
         <Menu
-          anchorEl={document.createElement('div')}
+          anchorEl={createAnchor()}
           open
           PaperProps={{
             'data-testid': 'paper',
@@ -160,7 +160,7 @@ describe('<Menu />', () => {
 
   it('should pass onClose prop to Popover', () => {
     const handleClose = spy();
-    render(<Menu anchorEl={document.createElement('div')} open onClose={handleClose} />);
+    render(<Menu anchorEl={createAnchor()} open onClose={handleClose} />);
 
     fireEvent.keyDown(screen.getByRole('menu'), { key: 'Escape' });
 
@@ -169,7 +169,7 @@ describe('<Menu />', () => {
 
   it('renders its children only when open', () => {
     const { setProps } = render(
-      <Menu anchorEl={document.createElement('div')} open={false}>
+      <Menu anchorEl={createAnchor()} open={false}>
         <div data-testid="children" />
       </Menu>,
     );
@@ -183,7 +183,7 @@ describe('<Menu />', () => {
 
   describe('list node', () => {
     it('should render a menu inside the Popover', () => {
-      render(<Menu anchorEl={document.createElement('div')} open data-testid="popover" />);
+      render(<Menu anchorEl={createAnchor()} open data-testid="popover" />);
 
       expect(screen.getByTestId('popover').querySelector('[role="menu"]')).not.to.equal(null);
     });
@@ -199,7 +199,7 @@ describe('<Menu />', () => {
       );
     }
     render(
-      <Menu anchorEl={document.createElement('div')} open>
+      <Menu anchorEl={createAnchor()} open>
         <MenuItem>one</MenuItem>
       </Menu>,
     );
@@ -209,7 +209,7 @@ describe('<Menu />', () => {
 
   it('should not focus list if autoFocus=false', () => {
     render(
-      <Menu anchorEl={document.createElement('div')} autoFocus={false} open>
+      <Menu anchorEl={createAnchor()} autoFocus={false} open>
         <div tabIndex={-1} />
       </Menu>,
     );
@@ -219,13 +219,7 @@ describe('<Menu />', () => {
 
   it('should call TransitionProps.onEntering', () => {
     const onEnteringSpy = spy();
-    render(
-      <Menu
-        anchorEl={document.createElement('div')}
-        open
-        TransitionProps={{ onEntering: onEnteringSpy }}
-      />,
-    );
+    render(<Menu anchorEl={createAnchor()} open TransitionProps={{ onEntering: onEnteringSpy }} />);
 
     expect(onEnteringSpy.callCount).to.equal(1);
   });
@@ -234,7 +228,7 @@ describe('<Menu />', () => {
     const onEnteringSpy = spy();
     render(
       <Menu
-        anchorEl={document.createElement('div')}
+        anchorEl={createAnchor()}
         disableAutoFocusItem
         open
         TransitionProps={{ onEntering: onEnteringSpy }}
@@ -263,7 +257,7 @@ describe('<Menu />', () => {
     }
     const onCloseSpy = spy();
     render(
-      <Menu anchorEl={document.createElement('div')} open onClose={onCloseSpy}>
+      <Menu anchorEl={createAnchor()} open onClose={onCloseSpy}>
         <MenuItem>hello</MenuItem>
       </Menu>,
     );
@@ -276,7 +270,7 @@ describe('<Menu />', () => {
 
   it('ignores invalid children', () => {
     render(
-      <Menu anchorEl={document.createElement('div')} open>
+      <Menu anchorEl={createAnchor()} open>
         {null}
         <span role="menuitem">hello</span>
         {/* testing conditional rendering */}
@@ -293,7 +287,7 @@ describe('<Menu />', () => {
     it('warns a Fragment is passed as a child', () => {
       expect(() => {
         render(
-          <Menu anchorEl={document.createElement('div')} open={false}>
+          <Menu anchorEl={createAnchor()} open={false}>
             {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
             <React.Fragment />
           </Menu>,
@@ -327,7 +321,7 @@ describe('<Menu />', () => {
       render(
         <ThemeProvider theme={theme}>
           <Menu
-            anchorEl={document.createElement('div')}
+            anchorEl={createAnchor()}
             open
             PaperProps={{
               'data-testid': 'paper',
@@ -361,7 +355,7 @@ describe('<Menu />', () => {
       render(
         <ThemeProvider theme={theme}>
           <Menu
-            anchorEl={document.createElement('div')}
+            anchorEl={createAnchor()}
             open
             PaperProps={{
               'data-testid': 'paper',
@@ -386,7 +380,7 @@ describe('<Menu />', () => {
         <Menu
           slots={{ root: 'span' }}
           slotProps={{ paper: { 'data-testid': 'paper' } }}
-          anchorEl={document.createElement('div')}
+          anchorEl={createAnchor()}
           open
         >
           <div />