diff --git a/packages/mui-joy/src/Box/Box.test.js b/packages/mui-joy/src/Box/Box.test.js
index b99f66c0393e17..94868c0cb761bd 100644
--- a/packages/mui-joy/src/Box/Box.test.js
+++ b/packages/mui-joy/src/Box/Box.test.js
@@ -23,13 +23,7 @@ describe('Joy <Box />', () => {
     refInstanceof: window.HTMLDivElement,
   }));
 
-  it('respects theme from context', function test() {
-    const isJSDOM = /jsdom/.test(window.navigator.userAgent);
-
-    if (isJSDOM) {
-      this.skip();
-    }
-
+  it('respects theme from context', () => {
     const { container } = render(
       <ThemeProvider
         theme={{
@@ -214,24 +208,6 @@ describe('Joy <Box />', () => {
       });
     });
 
-    it('letterSpacing', function test() {
-      const isJSDOM = /jsdom/.test(window.navigator.userAgent);
-
-      if (isJSDOM) {
-        this.skip();
-      }
-
-      const { container } = render(
-        <CssVarsProvider theme={theme}>
-          <Box sx={{ letterSpacing: 'md' }} />
-        </CssVarsProvider>,
-      );
-
-      expect(container.firstChild).toHaveComputedStyle({
-        letterSpacing: '1.328px',
-      });
-    });
-
     it('lineHeight', function test() {
       const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
diff --git a/packages/mui-joy/src/styles/extendTheme.test.js b/packages/mui-joy/src/styles/extendTheme.test.js
index cf39c5667968c9..e72cf9f195005e 100644
--- a/packages/mui-joy/src/styles/extendTheme.test.js
+++ b/packages/mui-joy/src/styles/extendTheme.test.js
@@ -1,5 +1,7 @@
+import * as React from 'react';
 import { expect } from 'chai';
-import extendTheme from './extendTheme';
+import { createRenderer } from 'test/utils';
+import { extendTheme, useTheme, CssVarsProvider } from '@mui/joy/styles';
 
 describe('extendTheme', () => {
   it('the output contains required fields', () => {
@@ -46,4 +48,83 @@ describe('extendTheme', () => {
     expect(theme.cssVarPrefix).to.equal('');
     expect(theme.typography.body1.fontSize).to.equal('var(--fontSize-md)');
   });
+
+  describe('theme.unstable_sx', () => {
+    const { render } = createRenderer();
+
+    let originalMatchmedia;
+    const storage = {};
+    beforeEach(() => {
+      originalMatchmedia = window.matchMedia;
+      // Create mocks of localStorage getItem and setItem functions
+      Object.defineProperty(global, 'localStorage', {
+        value: {
+          getItem: (key) => storage[key],
+          setItem: (key, value) => {
+            storage[key] = value;
+          },
+        },
+        configurable: true,
+      });
+      window.matchMedia = () => ({
+        addListener: () => {},
+        removeListener: () => {},
+      });
+    });
+    afterEach(() => {
+      window.matchMedia = originalMatchmedia;
+    });
+
+    const customTheme = extendTheme({
+      colorSchemes: {
+        light: {
+          palette: {
+            primary: {
+              500: 'rgb(0, 0, 255)',
+            },
+          },
+        },
+      },
+    });
+
+    it('bgcolor', () => {
+      let styles = {};
+
+      function Test() {
+        const theme = useTheme();
+        styles = theme.unstable_sx({ bgcolor: 'primary.500' });
+        return null;
+      }
+
+      render(
+        <CssVarsProvider theme={customTheme}>
+          <Test />
+        </CssVarsProvider>,
+      );
+
+      expect(styles).to.deep.equal({
+        backgroundColor: 'var(--joy-palette-primary-500)',
+      });
+    });
+
+    it('borderRadius', () => {
+      let styles = {};
+
+      function Test() {
+        const theme = useTheme();
+        styles = theme.unstable_sx({ borderRadius: 'md' });
+        return null;
+      }
+
+      render(
+        <CssVarsProvider theme={customTheme}>
+          <Test />
+        </CssVarsProvider>,
+      );
+
+      expect(styles).to.deep.equal({
+        borderRadius: 'var(--joy-radius-md)',
+      });
+    });
+  });
 });