Browser tests

package.json

@@ -137,6 +137,7 @@
     "@types/yargs": "^17.0.33",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
+    "@vitest/browser": "^2.1.2",
     "@vitest/coverage-v8": "^2.1.2",
     "babel-loader": "^9.2.1",
     "babel-plugin-istanbul": "^7.0.0",

packages/mui-joy/src/styles/CssVarsProvider.test.tsx

@@ -11,7 +11,7 @@ describe('[Joy] CssVarsProvider', () => {
   beforeEach(() => {
     originalMatchmedia = window.matchMedia;
     // Create mocks of localStorage getItem and setItem functions
-    Object.defineProperty(global, 'localStorage', {
+    Object.defineProperty(globalThis, 'localStorage', {
       value: {
         getItem: (key: string) => storage[key],
         setItem: (key: string, value: string) => {

packages/mui-joy/src/styles/extendTheme.test.js

@@ -205,7 +205,7 @@ describe('extendTheme', () => {
     beforeEach(() => {
       originalMatchmedia = window.matchMedia;
       // Create mocks of localStorage getItem and setItem functions
-      Object.defineProperty(global, 'localStorage', {
+      Object.defineProperty(globalThis, 'localStorage', {
         value: {
           getItem: (key) => storage[key],
           setItem: (key, value) => {

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

@@ -624,14 +624,8 @@ describe('<Button />', () => {
     expect(button.querySelector('.pulsate-focus-visible')).to.equal(null);
   });
 
-  describe('server-side', () => {
-    before(function beforeHook() {
-      // Only run the test on node.
-      if (!/jsdom/.test(window.navigator.userAgent)) {
-        this.skip();
-      }
-    });
-
+  // eslint-disable-next-line no-undef
+  describeSkipIf(!/jsdom/.test(window.navigator.userAgent))('server-side', () => {
     it('should server-side render', () => {
       const { container } = renderToString(<Button>Hello World</Button>);
       expect(container.firstChild).to.have.text('Hello World');

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

@@ -160,14 +160,8 @@ describe('<Fab />', () => {
     expect(renderedIconChild).to.have.class(childClassName);
   });
 
-  describe('server-side', () => {
-    before(function beforeHook() {
-      // Only run the test on node.
-      if (!/jsdom/.test(window.navigator.userAgent)) {
-        this.skip();
-      }
-    });
-
+  // eslint-disable-next-line no-undef
+  describeSkipIf(!/jsdom/.test(window.navigator.userAgent))('server-side', () => {
     it('should server-side render', () => {
       const { container } = renderToString(<Fab>Fab</Fab>);
       expect(container.firstChild).to.have.text('Fab');

packages/mui-material/src/Portal/Portal.test.tsx

@@ -7,14 +7,9 @@ import Portal, { PortalProps } from '@mui/material/Portal';
 describe('<Portal />', () => {
   const { render, renderToString } = createRenderer();
 
-  describe('server-side', () => {
-    before(function beforeHook() {
-      // Only run the test on node.
-      if (!/jsdom/.test(window.navigator.userAgent)) {
-        this.skip();
-      }
-    });
-
+  // @ts-expect-error
+  // eslint-disable-next-line no-undef
+  describeSkipIf(!/jsdom/.test(window.navigator.userAgent))('server-side', () => {
     it('render nothing on the server', () => {
       const { container } = renderToString(
         <Portal>

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

@@ -368,15 +368,11 @@ describe('<Tabs />', () => {
         ]);
       });
 
-      describe('hidden tab / tabs', () => {
+      // eslint-disable-next-line no-undef
+      describeSkipIf(!/jsdom/.test(window.navigator.userAgent))('hidden tab / tabs', () => {
         let nodeEnv;
 
         before(function test() {
-          if (!/jsdom/.test(window.navigator.userAgent)) {
-            this.skip();
-            return;
-          }
-
           nodeEnv = process.env.NODE_ENV;
           // We can't use a regular assignment, because it causes a syntax error in Karma
           Object.defineProperty(process.env, 'NODE_ENV', {

packages/mui-material/src/TextareaAutosize/TextareaAutosize.test.tsx

@@ -137,7 +137,9 @@ describe('<TextareaAutosize />', () => {
     expect(parseInt(input.style.height, 10)).to.be.within(15, 17);
   });
 
-  describe('layout', () => {
+  // @ts-expect-error
+  // eslint-disable-next-line no-undef
+  describeSkipIf(!/jsdom/.test(window.navigator.userAgent))('layout', () => {
     const getComputedStyleStub = new Map<Element, Partial<CSSStyleDeclaration>>();
     function setLayout(
       input: HTMLTextAreaElement,
@@ -166,11 +168,6 @@ describe('<TextareaAutosize />', () => {
     }
 
     before(function beforeHook() {
-      // Only run the test on node.
-      if (!/jsdom/.test(window.navigator.userAgent)) {
-        this.skip();
-      }
-
       stub(window, 'getComputedStyle').value(
         (node: Element) => getComputedStyleStub.get(node) || {},
       );

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

@@ -125,14 +125,8 @@ describe('<ToggleButton />', () => {
     });
   });
 
-  describe('server-side', () => {
-    before(function beforeHook() {
-      // Only run the test on node.
-      if (!/jsdom/.test(window.navigator.userAgent)) {
-        this.skip();
-      }
-    });
-
+  // eslint-disable-next-line no-undef
+  describeSkipIf(!/jsdom/.test(window.navigator.userAgent))('server-side', () => {
     it('should server-side render', () => {
       const { container } = renderToString(<ToggleButton value="hello">Hello World</ToggleButton>);
       expect(container.firstChild).to.have.text('Hello World');

packages/mui-material/src/internal/SwitchBase.test.js

@@ -395,7 +395,7 @@ describe('<SwitchBase />', () => {
 
   describe('check transitioning between controlled states throws errors', () => {
     it('should error when uncontrolled and changed to controlled', function test() {
-      if (global.didWarnControlledToUncontrolled) {
+      if (globalThis.didWarnControlledToUncontrolled) {
         this.skip();
       }
 
@@ -421,7 +421,7 @@ describe('<SwitchBase />', () => {
     });
 
     it('should error when controlled and changed to uncontrolled', function test() {
-      if (global.didWarnControlledToUncontrolled) {
+      if (globalThis.didWarnControlledToUncontrolled) {
         this.skip();
       }
 

packages/mui-material/src/styles/ThemeProvider.test.tsx

@@ -12,7 +12,7 @@ describe('ThemeProvider', () => {
     originalMatchmedia = window.matchMedia;
     // Create mocks of localStorage getItem and setItem functions
     storage = {};
-    Object.defineProperty(global, 'localStorage', {
+    Object.defineProperty(globalThis, 'localStorage', {
       value: {
         getItem: (key: string) => storage[key],
         setItem: (key: string, value: string) => {

packages/mui-material/src/styles/ThemeProviderWithVars.test.js

@@ -12,7 +12,7 @@ describe('[Material UI] ThemeProviderWithVars', () => {
   beforeEach(() => {
     originalMatchmedia = window.matchMedia;
     // Create mocks of localStorage getItem and setItem functions
-    Object.defineProperty(global, 'localStorage', {
+    Object.defineProperty(globalThis, 'localStorage', {
       value: {
         getItem: (key) => storage[key],
         setItem: (key, value) => {

packages/mui-material/src/styles/extendTheme.test.js

@@ -14,7 +14,7 @@ describe('extendTheme', () => {
   beforeEach(() => {
     originalMatchmedia = window.matchMedia;
     // Create mocks of localStorage getItem and setItem functions
-    Object.defineProperty(global, 'localStorage', {
+    Object.defineProperty(globalThis, 'localStorage', {
       value: {
         getItem: (key) => storage[key],
         setItem: (key, value) => {

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

@@ -48,7 +48,8 @@ describe('useScrollTrigger', () => {
     });
   });
 
-  describe('scroll', () => {
+  // eslint-disable-next-line no-undef
+  describeSkipIf(!/jsdom/.test(window.navigator.userAgent))('scroll', () => {
     const triggerRef = React.createRef();
     const containerRef = React.createRef(); // Get the scroll container's parent
     const getContainer = () => containerRef.current.children[0]; // Get the scroll container
@@ -75,13 +76,6 @@ describe('useScrollTrigger', () => {
       customContainer: PropTypes.bool,
     };
 
-    before(function beforeHook() {
-      // Only run the test on node.
-      if (!/jsdom/.test(window.navigator.userAgent)) {
-        this.skip();
-      }
-    });
-
     function dispatchScroll(offset, element = window) {
       act(() => {
         element.pageYOffset = offset;

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

@@ -308,18 +308,22 @@ describe('<Menu /> integration', () => {
     );
   });
 
-  it('closes the menu when Tabbing while the list is active', async () => {
-    render(<ButtonMenu />);
+  it.only('closes the menu when Tabbing while the list is active', async () => {
+    const { user } = render(<ButtonMenu />);
 
     const trigger = screen.getByRole('button');
     await act(async () => {
       trigger.focus();
+    });
+
+    await act(async () => {
       trigger.click();
     });
 
     // react-transition-group uses one commit per state transition so we need to wait a bit
     fireEvent.keyDown(screen.getAllByRole('menuitem')[0], { key: 'Tab' });
-    clock.tick(0);
+
+    // await user.keyboard('[Tab]');
 
     expect(screen.getByRole('menu', { hidden: true })).toBeInaccessible();
   });

packages/mui-material/vitest.config.ts

@@ -25,7 +25,18 @@ export default defineConfig({
       // We use performance.now in the codebase
       toFake: [...configDefaults.fakeTimers.toFake, 'performance'],
     },
+    browser: {
+      enabled: false, // enabled through CLI
+      name: 'chromium',
+      provider: 'playwright',
+      headless: !!process.env.CI,
+      viewport: {
+        width: 1024,
+        height: 896,
+      },
+    },
   },
+
   resolve: {
     alias: {
       '@mui/internal-test-utils': path.resolve(MONOREPO_ROOT, './packages-internal/test-utils/src'),

packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.test.js

@@ -20,7 +20,7 @@ describe('InitColorSchemeScript', () => {
 
   beforeEach(() => {
     // Create mocks of localStorage getItem and setItem functions
-    Object.defineProperty(global, 'localStorage', {
+    Object.defineProperty(globalThis, 'localStorage', {
       value: {
         getItem: (key) => storage[key],
       },

packages/mui-system/src/cssVars/createCssVarsProvider.test.js

@@ -28,7 +28,7 @@ describe('createCssVarsProvider', () => {
     originalMatchmedia = window.matchMedia;
 
     // Create mocks of localStorage getItem and setItem functions
-    Object.defineProperty(global, 'localStorage', {
+    Object.defineProperty(globalThis, 'localStorage', {
       value: {
         getItem: spy((key) => storage[key]),
         setItem: spy((key, value) => {

packages/mui-system/src/cssVars/useCurrentColorScheme.test.js

@@ -45,7 +45,7 @@ describe('useCurrentColorScheme', () => {
     // clear the localstorage
     storage = {};
     // Create mocks of localStorage getItem and setItem functions
-    Object.defineProperty(global, 'localStorage', {
+    Object.defineProperty(globalThis, 'localStorage', {
       value: {
         getItem: spy((key) => storage[key]),
         setItem: spy((key, value) => {