diff --git a/packages/fuselage-toastbar/package.json b/packages/fuselage-toastbar/package.json
index 523363678c..c68d5e73fe 100644
--- a/packages/fuselage-toastbar/package.json
+++ b/packages/fuselage-toastbar/package.json
@@ -66,6 +66,7 @@
     "bump": "workspace:~",
     "eslint": "~8.38.0",
     "jest": "~29.7.0",
+    "jest-environment-jsdom": "~29.7.0",
     "lint-all": "workspace:~",
     "npm-run-all": "^4.1.5",
     "prettier": "~2.8.7",
diff --git a/packages/fuselage-toastbar/src/ToastBar.spec.tsx b/packages/fuselage-toastbar/src/ToastBar.spec.tsx
index 7357941133..7ffe897b67 100644
--- a/packages/fuselage-toastbar/src/ToastBar.spec.tsx
+++ b/packages/fuselage-toastbar/src/ToastBar.spec.tsx
@@ -1,9 +1,10 @@
 import { composeStories } from '@storybook/react';
-import { render, getByRole, screen } from '@testing-library/react';
+import { getByRole, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import * as stories from './ToastBar.stories';
 import ToastBarProvider from './ToastBarProvider';
+import { render } from './testing';
 
 const { Default, TopEnd } = composeStories(stories, {
   decorators: [
@@ -27,7 +28,7 @@ const topStartStyle = {
 
 describe('[fuselage-toastbar rendering]', () => {
   test('should display ToastBar on the top right of the screen by default', async () => {
-    render(<TopEnd />, { legacyRoot: true });
+    render(<TopEnd />);
     const toast = screen.queryByRole('alert');
     const toastContainer = toast?.parentElement?.parentElement?.parentElement;
 
@@ -36,7 +37,7 @@ describe('[fuselage-toastbar rendering]', () => {
 
   test('should display ToastBar on the top right of the screen', async () => {
     document.body.setAttribute('dir', 'ltr');
-    render(<TopEnd />, { legacyRoot: true });
+    render(<TopEnd />);
     const toast = screen.queryByRole('alert');
     const toastContainer = toast?.parentElement?.parentElement?.parentElement;
 
@@ -45,7 +46,7 @@ describe('[fuselage-toastbar rendering]', () => {
 
   test('should display ToastBar on the top left of the screen', async () => {
     document.body.setAttribute('dir', 'rtl');
-    render(<TopEnd />, { legacyRoot: true });
+    render(<TopEnd />);
     const toast = screen.queryByRole('alert');
     const toastContainer = toast?.parentElement?.parentElement?.parentElement;
 
@@ -55,7 +56,7 @@ describe('[fuselage-toastbar rendering]', () => {
 
 describe('[fuselage-toastbar interacting]', () => {
   test('should dispatch the ToastBar on click', async () => {
-    const { container } = render(<Default />, { legacyRoot: true });
+    const { container } = render(<Default />);
     const button = getByRole(container, 'button');
 
     userEvent.click(button);
diff --git a/packages/fuselage-toastbar/src/testing.ts b/packages/fuselage-toastbar/src/testing.ts
new file mode 100644
index 0000000000..0c9d557aca
--- /dev/null
+++ b/packages/fuselage-toastbar/src/testing.ts
@@ -0,0 +1,34 @@
+import type {
+  queries,
+  Queries,
+  RenderOptions,
+  RenderResult,
+} from '@testing-library/react';
+import { render as renderOriginal } from '@testing-library/react';
+import type React from 'react';
+import type ReactDOMClient from 'react-dom';
+
+type RendererableContainer = ReactDOMClient.Container;
+type HydrateableContainer = Parameters<(typeof ReactDOMClient)['hydrate']>[0];
+
+/**
+ * Light wrapper around `react-testing-library` to provide a custom render function for transitioning to React 18
+ */
+export function render<
+  Q extends Queries = typeof queries,
+  Container extends RendererableContainer | HydrateableContainer = HTMLElement,
+  BaseElement extends RendererableContainer | HydrateableContainer = Container
+>(
+  ui: React.ReactNode,
+  options: RenderOptions<Q, Container, BaseElement>
+): RenderResult<Q, Container, BaseElement>;
+export function render(
+  ui: React.ReactNode,
+  options?: Omit<RenderOptions, 'queries'>
+): RenderResult;
+export function render(ui: React.ReactNode, options?: any): any {
+  return renderOriginal(ui, {
+    legacyRoot: true,
+    ...options,
+  });
+}
diff --git a/packages/fuselage/src/components/Accordion/Accordion.spec.tsx b/packages/fuselage/src/components/Accordion/Accordion.spec.tsx
index f947677eed..dd89c59947 100644
--- a/packages/fuselage/src/components/Accordion/Accordion.spec.tsx
+++ b/packages/fuselage/src/components/Accordion/Accordion.spec.tsx
@@ -1,18 +1,18 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './Accordion.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[Accordion Component]', () => {
   it('renders without crashing', () => {
-    render(<Default />, { legacyRoot: true });
+    render(<Default />);
   });
 
   it('should have no a11y violations', async () => {
-    const { container } = render(<Default />, { legacyRoot: true });
+    const { container } = render(<Default />);
 
     const results = await axe(container);
     expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/AutoComplete/AutoComplete.spec.tsx b/packages/fuselage/src/components/AutoComplete/AutoComplete.spec.tsx
index 21eba1f4f8..26d5fe1cb8 100644
--- a/packages/fuselage/src/components/AutoComplete/AutoComplete.spec.tsx
+++ b/packages/fuselage/src/components/AutoComplete/AutoComplete.spec.tsx
@@ -1,8 +1,8 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 import { withResizeObserverMock } from 'testing-utils/mocks/withResizeObserverMock';
 
+import { render } from '../../testing';
 import * as stories from './AutoComplete.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -16,7 +16,7 @@ describe('[AutoComplete Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -24,7 +24,7 @@ describe('[AutoComplete Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Avatar/Avatar.spec.tsx b/packages/fuselage/src/components/Avatar/Avatar.spec.tsx
index 72788c58b6..8bbc21c4f5 100644
--- a/packages/fuselage/src/components/Avatar/Avatar.spec.tsx
+++ b/packages/fuselage/src/components/Avatar/Avatar.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './Avatar.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -13,7 +13,7 @@ describe('[Avatar Component]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -21,7 +21,7 @@ describe('[Avatar Component]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Badge/Badge.spec.tsx b/packages/fuselage/src/components/Badge/Badge.spec.tsx
index d7486696d8..f0df5984d5 100644
--- a/packages/fuselage/src/components/Badge/Badge.spec.tsx
+++ b/packages/fuselage/src/components/Badge/Badge.spec.tsx
@@ -1,6 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 
+import { render } from '../../testing';
 import { Badge } from './Badge';
 import * as stories from './Badge.stories';
 
@@ -10,54 +11,48 @@ const { Default, Primary, Secondary, Danger, Warning, Disabled } =
 describe('[Badge Component]', () => {
   describe('Story renders without crashing', () => {
     it('Default', () => {
-      render(<Default />, { legacyRoot: true });
+      render(<Default />);
     });
     it('Primary', () => {
-      render(<Primary />, { legacyRoot: true });
+      render(<Primary />);
     });
     it('Secondary', () => {
-      render(<Secondary />, { legacyRoot: true });
+      render(<Secondary />);
     });
     it('Danger', () => {
-      render(<Danger />, { legacyRoot: true });
+      render(<Danger />);
     });
     it('Warning', () => {
-      render(<Warning />, { legacyRoot: true });
+      render(<Warning />);
     });
     it('Disabled', () => {
-      render(<Disabled />, { legacyRoot: true });
+      render(<Disabled />);
     });
   });
 
   it('should display children', () => {
-    render(<Badge>Children</Badge>, { legacyRoot: true });
+    render(<Badge>Children</Badge>);
     screen.getByText('Children');
   });
 
   it('should have class according to variant', () => {
-    const { container } = render(<Badge variant='primary' />, {
-      legacyRoot: true,
-    });
+    const { container } = render(<Badge variant='primary' />);
     expect(container.querySelector('.rcx-badge--primary')).toBeInTheDocument();
   });
 
   it('should have class passed as property', () => {
-    const { container } = render(<Badge className='test-class' />, {
-      legacyRoot: true,
-    });
+    const { container } = render(<Badge className='test-class' />);
     expect(container.querySelector('.test-class')).toBeInTheDocument();
   });
 
   it('should show title when hovered', () => {
-    const { container } = render(<Badge title='test-title' />, {
-      legacyRoot: true,
-    });
+    const { container } = render(<Badge title='test-title' />);
     const badgeTitle = container.querySelector('span');
     expect(badgeTitle?.getAttribute('title')).toEqual('test-title');
   });
 
   it('should have disabled class if it has the disabled property', () => {
-    const { container } = render(<Badge disabled />, { legacyRoot: true });
+    const { container } = render(<Badge disabled />);
     expect(container.querySelector('.rcx-badge--disabled')).toBeInTheDocument();
   });
 });
diff --git a/packages/fuselage/src/components/Banner/Banner.spec.tsx b/packages/fuselage/src/components/Banner/Banner.spec.tsx
index c52fd5349e..a4b2d59a12 100644
--- a/packages/fuselage/src/components/Banner/Banner.spec.tsx
+++ b/packages/fuselage/src/components/Banner/Banner.spec.tsx
@@ -1,19 +1,18 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { withResizeObserverMock } from 'testing-utils/mocks/withResizeObserverMock';
 
+import { render } from '../../testing';
 import Banner from './Banner';
 
 withResizeObserverMock();
 
 describe('[Banner Component]', () => {
   it('renders without crashing', () => {
-    render(<Banner />, { legacyRoot: true });
+    render(<Banner />);
   });
 
   it('renders with link', () => {
-    render(<Banner link='https://rocket.chat' linkText='More info' />, {
-      legacyRoot: true,
-    });
+    render(<Banner link='https://rocket.chat' linkText='More info' />);
     expect(
       screen.getByRole('link', {
         name: /more info/i,
diff --git a/packages/fuselage/src/components/Box/Box.spec.tsx b/packages/fuselage/src/components/Box/Box.spec.tsx
index 5113db9b03..2871c14564 100644
--- a/packages/fuselage/src/components/Box/Box.spec.tsx
+++ b/packages/fuselage/src/components/Box/Box.spec.tsx
@@ -1,18 +1,16 @@
 import { css } from '@rocket.chat/css-in-js';
-import { render } from '@testing-library/react';
 
 import Box from '.';
+import { render } from '../../testing';
 
 describe('[Box Component]', () => {
   it('renders without crashing', () => {
-    render(<Box />, { legacyRoot: true });
+    render(<Box />);
   });
 
   describe('className prop', () => {
     it('accepts a string in className prop', () => {
-      const { container } = render(<Box className='fuselage' />, {
-        legacyRoot: true,
-      });
+      const { container } = render(<Box className='fuselage' />);
 
       expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
       expect(container.firstElementChild).toBeInstanceOf(HTMLDivElement);
@@ -26,8 +24,7 @@ describe('[Box Component]', () => {
           className={css`
             width: 10em;
           `}
-        />,
-        { legacyRoot: true }
+        />
       );
 
       expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
@@ -39,9 +36,7 @@ describe('[Box Component]', () => {
     });
 
     it('accepts an empty array in className prop', () => {
-      const { container } = render(<Box className={[]} />, {
-        legacyRoot: true,
-      });
+      const { container } = render(<Box className={[]} />);
 
       expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
       expect(container.firstElementChild).toHaveClass('rcx-box');
@@ -56,8 +51,7 @@ describe('[Box Component]', () => {
               width: 10em;
             `,
           ]}
-        />,
-        { legacyRoot: true }
+        />
       );
 
       expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
@@ -71,8 +65,7 @@ describe('[Box Component]', () => {
 
     it('attaches rcx-* props into className', () => {
       const { container } = render(
-        <Box rcx-test-a rcx-test-b={false} rcx-test-c={true} rcx-test='d' />,
-        { legacyRoot: true }
+        <Box rcx-test-a rcx-test-b={false} rcx-test-c={true} rcx-test='d' />
       );
 
       expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
@@ -91,8 +84,7 @@ describe('[Box Component]', () => {
           rcx-test-b={false}
           rcx-test-c={true}
           rcx-test='d'
-        />,
-        { legacyRoot: true }
+        />
       );
 
       expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
@@ -116,8 +108,7 @@ describe('[Box Component]', () => {
           rcx-test-b={false}
           rcx-test-c={true}
           rcx-test='d'
-        />,
-        { legacyRoot: true }
+        />
       );
 
       expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
@@ -136,14 +127,13 @@ describe('[Box Component]', () => {
 
   describe('is props', () => {
     it('accepts a instrinsic HTML element', () => {
-      const { container } = render(<Box is='span' />, { legacyRoot: true });
+      const { container } = render(<Box is='span' />);
 
       expect(container.firstElementChild).toHaveProperty('tagName', 'SPAN');
     });
 
     it('accepts a instrinsic SVG element', () => {
       const { container } = render(<Box is='path' />, {
-        legacyRoot: true,
         wrapper: ({ children }) => <svg children={children} />,
       });
 
diff --git a/packages/fuselage/src/components/Bubble/Bubble.spec.tsx b/packages/fuselage/src/components/Bubble/Bubble.spec.tsx
index a67ea8fe83..32f78d910f 100644
--- a/packages/fuselage/src/components/Bubble/Bubble.spec.tsx
+++ b/packages/fuselage/src/components/Bubble/Bubble.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './Bubble.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -13,7 +13,7 @@ describe('[Bubble Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -21,7 +21,7 @@ describe('[Bubble Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Button/Button.spec.tsx b/packages/fuselage/src/components/Button/Button.spec.tsx
index 169d8938db..f867c8b9d0 100644
--- a/packages/fuselage/src/components/Button/Button.spec.tsx
+++ b/packages/fuselage/src/components/Button/Button.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './Button.stories';
 import * as iconButtonStories from './IconButton.stories';
 
@@ -11,15 +11,15 @@ const { _IconButton, _IconButtonInfo, _IconButtonSuccess } =
 
 describe('[Button Component]', () => {
   it('renders Button without crashing', () => {
-    render(<Default />, { legacyRoot: true });
+    render(<Default />);
   });
 
   it('renders ActionButton without crashing', () => {
-    render(<AsIconButton />, { legacyRoot: true });
+    render(<AsIconButton />);
   });
 
   it('should have no a11y violations', async () => {
-    const { container } = render(<Default />, { legacyRoot: true });
+    const { container } = render(<Default />);
 
     const results = await axe(container);
     expect(results).toHaveNoViolations();
@@ -28,25 +28,25 @@ describe('[Button Component]', () => {
 
 describe('[IconButton Component]', () => {
   it('renders IconButton without crashing', () => {
-    render(<AsIconButton />, { legacyRoot: true });
+    render(<AsIconButton />);
   });
 
   it('IconButton default should have no a11y violations', async () => {
-    const { container } = render(<_IconButton />, { legacyRoot: true });
+    const { container } = render(<_IconButton />);
 
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });
 
   it('IconButtonInfo should have no a11y violations', async () => {
-    const { container } = render(<_IconButtonInfo />, { legacyRoot: true });
+    const { container } = render(<_IconButtonInfo />);
 
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });
 
   it('IconButtonSuccess should have no a11y violations', async () => {
-    const { container } = render(<_IconButtonSuccess />, { legacyRoot: true });
+    const { container } = render(<_IconButtonSuccess />);
 
     const results = await axe(container);
     expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/ButtonGroup/ButtonGroup.spec.tsx b/packages/fuselage/src/components/ButtonGroup/ButtonGroup.spec.tsx
index 325ad6d2dc..121c8eb0bc 100644
--- a/packages/fuselage/src/components/ButtonGroup/ButtonGroup.spec.tsx
+++ b/packages/fuselage/src/components/ButtonGroup/ButtonGroup.spec.tsx
@@ -1,18 +1,18 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './ButtonGroup.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[ButtonGroup Component]', () => {
   it('renders without crashing', () => {
-    render(<Default />, { legacyRoot: true });
+    render(<Default />);
   });
 
   it('should have no a11y violations', async () => {
-    const { container } = render(<Default />, { legacyRoot: true });
+    const { container } = render(<Default />);
 
     const results = await axe(container);
     expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Callout/Callout.spec.tsx b/packages/fuselage/src/components/Callout/Callout.spec.tsx
index 49b20c274f..188173fe4d 100644
--- a/packages/fuselage/src/components/Callout/Callout.spec.tsx
+++ b/packages/fuselage/src/components/Callout/Callout.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './Callout.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -13,7 +13,7 @@ describe('[CheckBox Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -21,7 +21,7 @@ describe('[CheckBox Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Card/Card.spec.tsx b/packages/fuselage/src/components/Card/Card.spec.tsx
index 6430543c5a..5ee265aae1 100644
--- a/packages/fuselage/src/components/Card/Card.spec.tsx
+++ b/packages/fuselage/src/components/Card/Card.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './Card.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -13,7 +13,7 @@ describe('[Card Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -21,7 +21,7 @@ describe('[Card Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/CardGrid/CardGrid.spec.tsx b/packages/fuselage/src/components/CardGrid/CardGrid.spec.tsx
index cf3999c43e..31256ca92f 100644
--- a/packages/fuselage/src/components/CardGrid/CardGrid.spec.tsx
+++ b/packages/fuselage/src/components/CardGrid/CardGrid.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './CardGrid.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -13,7 +13,7 @@ describe('[CardGrid Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -21,7 +21,7 @@ describe('[CardGrid Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/CardGroup/CardGroup.spec.tsx b/packages/fuselage/src/components/CardGroup/CardGroup.spec.tsx
index 8c6e556f51..9b5dba8149 100644
--- a/packages/fuselage/src/components/CardGroup/CardGroup.spec.tsx
+++ b/packages/fuselage/src/components/CardGroup/CardGroup.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './CardGroup.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -13,7 +13,7 @@ describe('[CardGroup Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -21,7 +21,7 @@ describe('[CardGroup Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/CheckBox/CheckBox.spec.tsx b/packages/fuselage/src/components/CheckBox/CheckBox.spec.tsx
index cbef0792d5..e3e203c93d 100644
--- a/packages/fuselage/src/components/CheckBox/CheckBox.spec.tsx
+++ b/packages/fuselage/src/components/CheckBox/CheckBox.spec.tsx
@@ -1,7 +1,8 @@
 import { composeStories } from '@storybook/react';
-import { fireEvent, getByRole, render } from '@testing-library/react';
+import { fireEvent, getByRole } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './CheckBox.stories';
 
 const { Default, Indeterminate, Disabled, DefaultChecked } =
@@ -16,7 +17,7 @@ describe('[CheckBox Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -24,7 +25,7 @@ describe('[CheckBox Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
@@ -34,32 +35,32 @@ describe('[CheckBox Rendering]', () => {
 
 describe('[CheckBox Interacting]', () => {
   it('changes style of element as checkbox is checked', () => {
-    const { container } = render(<Default />, { legacyRoot: true });
+    const { container } = render(<Default />);
     const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
     fireEvent.click(checkbox);
     expect(checkbox.checked).toEqual(true);
   });
   it('changes style of element as checkbox is checked/unchecked', () => {
-    const { container } = render(<Default />, { legacyRoot: true });
+    const { container } = render(<Default />);
     const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
     fireEvent.click(checkbox);
     fireEvent.click(checkbox);
     expect(checkbox.checked).toEqual(false);
   });
   it('displays checkbox indeterminate correctly', () => {
-    const { container } = render(<Indeterminate />, { legacyRoot: true });
+    const { container } = render(<Indeterminate />);
     const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
     expect(checkbox.indeterminate).toEqual(true);
   });
 
   it('displays checkbox with defaultChecked value correctly', () => {
-    const { container } = render(<DefaultChecked />, { legacyRoot: true });
+    const { container } = render(<DefaultChecked />);
     const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
     expect(checkbox.defaultChecked).toEqual(true);
   });
 
   it('displays checkbox disabled correctly', () => {
-    const { container } = render(<Disabled />, { legacyRoot: true });
+    const { container } = render(<Disabled />);
     const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
     expect(checkbox.disabled).toEqual(true);
   });
diff --git a/packages/fuselage/src/components/Chevron/Chevron.spec.tsx b/packages/fuselage/src/components/Chevron/Chevron.spec.tsx
index 42bfff6688..6c8ec5b1ff 100644
--- a/packages/fuselage/src/components/Chevron/Chevron.spec.tsx
+++ b/packages/fuselage/src/components/Chevron/Chevron.spec.tsx
@@ -1,12 +1,12 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 
+import { render } from '../../testing';
 import * as stories from './Chevron.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[Chevron Component]', () => {
   it('renders without crashing', () => {
-    render(<Default />, { legacyRoot: true });
+    render(<Default />);
   });
 });
diff --git a/packages/fuselage/src/components/Chip/Chip.spec.tsx b/packages/fuselage/src/components/Chip/Chip.spec.tsx
index bdd72b8050..52705a7f70 100644
--- a/packages/fuselage/src/components/Chip/Chip.spec.tsx
+++ b/packages/fuselage/src/components/Chip/Chip.spec.tsx
@@ -1,12 +1,12 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 
+import { render } from '../../testing';
 import * as stories from './Chip.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[Chevron Component]', () => {
   it('renders without crashing', () => {
-    render(<Default />, { legacyRoot: true });
+    render(<Default />);
   });
 });
diff --git a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.spec.tsx b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.spec.tsx
index 0b38aededc..3b6e27db48 100644
--- a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.spec.tsx
+++ b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.spec.tsx
@@ -1,6 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 
+import { render } from '../../testing';
 import * as stories from './CodeSnippet.stories';
 
 const { Default, CopyButton, CustomButtonName, LoadingCode, DisabledButton } =
@@ -8,11 +9,11 @@ const { Default, CopyButton, CustomButtonName, LoadingCode, DisabledButton } =
 
 describe('[CodeSnippet Component]', () => {
   it('renders without crashing', () => {
-    render(<Default />, { legacyRoot: true });
+    render(<Default />);
   });
 
   it('should display children', () => {
-    render(<Default>Children</Default>, { legacyRoot: true });
+    render(<Default>Children</Default>);
     screen.getByText('Children');
   });
 
@@ -20,7 +21,7 @@ describe('[CodeSnippet Component]', () => {
     let onClickSpy: ReturnType<typeof jest.fn>;
     beforeEach(() => {
       onClickSpy = jest.fn();
-      render(<CopyButton onClick={onClickSpy} />, { legacyRoot: true });
+      render(<CopyButton onClick={onClickSpy} />);
     });
 
     it('should display button, when component receives onClick property', () => {
@@ -35,17 +36,17 @@ describe('[CodeSnippet Component]', () => {
   });
 
   it('should change button name, when buttonText property is passed', () => {
-    render(<CustomButtonName buttonText='custom-name' />, { legacyRoot: true });
+    render(<CustomButtonName buttonText='custom-name' />);
     screen.getByText('custom-name');
   });
 
   it('should display skeleton, when there is no children', () => {
-    const { container } = render(<LoadingCode />, { legacyRoot: true });
+    const { container } = render(<LoadingCode />);
     expect(container.querySelector('.rcx-skeleton')).toBeInTheDocument();
   });
 
   it('should should render a disabled button, when buttonDisabled prop is passed', () => {
-    render(<DisabledButton />, { legacyRoot: true });
+    render(<DisabledButton />);
     const button = screen.getByRole('button');
     expect(button).toBeDisabled();
   });
diff --git a/packages/fuselage/src/components/Contextualbar/Contextualbar.spec.tsx b/packages/fuselage/src/components/Contextualbar/Contextualbar.spec.tsx
index beb71ce23e..49dd64cc24 100644
--- a/packages/fuselage/src/components/Contextualbar/Contextualbar.spec.tsx
+++ b/packages/fuselage/src/components/Contextualbar/Contextualbar.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe, toHaveNoViolations } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './Contextualbar.stories';
 
 expect.extend(toHaveNoViolations);
@@ -15,7 +15,7 @@ describe('[Contextualbar Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -23,7 +23,7 @@ describe('[Contextualbar Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/ContextualbarV2/Contextualbar.spec.tsx b/packages/fuselage/src/components/ContextualbarV2/Contextualbar.spec.tsx
index beb71ce23e..49dd64cc24 100644
--- a/packages/fuselage/src/components/ContextualbarV2/Contextualbar.spec.tsx
+++ b/packages/fuselage/src/components/ContextualbarV2/Contextualbar.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe, toHaveNoViolations } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './Contextualbar.stories';
 
 expect.extend(toHaveNoViolations);
@@ -15,7 +15,7 @@ describe('[Contextualbar Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -23,7 +23,7 @@ describe('[Contextualbar Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Divider/Divider.spec.tsx b/packages/fuselage/src/components/Divider/Divider.spec.tsx
index 53a745f86a..409b83ac0f 100644
--- a/packages/fuselage/src/components/Divider/Divider.spec.tsx
+++ b/packages/fuselage/src/components/Divider/Divider.spec.tsx
@@ -1,12 +1,12 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 
+import { render } from '../../testing';
 import * as stories from './Divider.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[Divider Component]', () => {
   it('renders without crashing', () => {
-    render(<Default />, { legacyRoot: true });
+    render(<Default />);
   });
 });
diff --git a/packages/fuselage/src/components/Dropdown/Dropdown.spec.tsx b/packages/fuselage/src/components/Dropdown/Dropdown.spec.tsx
index 6866e67043..c9379b2152 100644
--- a/packages/fuselage/src/components/Dropdown/Dropdown.spec.tsx
+++ b/packages/fuselage/src/components/Dropdown/Dropdown.spec.tsx
@@ -1,7 +1,8 @@
 import { composeStories } from '@storybook/react';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { render } from '../../testing';
 import * as stories from './Dropdown.stories';
 
 const { Default } = composeStories(stories);
@@ -10,22 +11,18 @@ describe('[Dropdown Component]', () => {
   const dropdownOption = screen.queryByText('Example 1');
 
   it('renders without crashing', () => {
-    render(<Default />, { legacyRoot: true });
+    render(<Default />);
   });
 
   it('should show dropdown when anchor is clicked once', async () => {
-    const { getByTestId } = render(<Default {...Default.args} />, {
-      legacyRoot: true,
-    });
+    const { getByTestId } = render(<Default {...Default.args} />);
     const anchor = getByTestId('dropdown-anchor');
     await userEvent.click(anchor);
     expect(await screen.findByTestId('dropdown')).toBeInTheDocument();
   });
 
   it('should hide dropdown when anchor is clicked twice', async () => {
-    const { getByTestId } = render(<Default {...Default.args} />, {
-      legacyRoot: true,
-    });
+    const { getByTestId } = render(<Default {...Default.args} />);
     const anchor = getByTestId('dropdown-anchor');
     await userEvent.click(anchor);
     await userEvent.click(anchor);
diff --git a/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx b/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx
index 32c3e906bc..71a8fefd33 100644
--- a/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx
+++ b/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx
@@ -1,19 +1,19 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './EmailInput.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[EmailInput Component]', () => {
   it('renders without crashing', () => {
-    const tree = render(<Default />, { legacyRoot: true });
+    const tree = render(<Default />);
     expect(tree.baseElement).toMatchSnapshot();
   });
 
   it('%s should have no a11y violations', async () => {
-    const { container } = render(<Default />, { legacyRoot: true });
+    const { container } = render(<Default />);
 
     const results = await axe(container);
     expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Field/Field.spec.tsx b/packages/fuselage/src/components/Field/Field.spec.tsx
index 4db4022693..99dd850b5d 100644
--- a/packages/fuselage/src/components/Field/Field.spec.tsx
+++ b/packages/fuselage/src/components/Field/Field.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './Field.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -13,7 +13,7 @@ describe('[Field Component]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -21,7 +21,7 @@ describe('[Field Component]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/FieldGroup/FieldGroup.spec.tsx b/packages/fuselage/src/components/FieldGroup/FieldGroup.spec.tsx
index 4220a580d0..e7b8a7ad4c 100644
--- a/packages/fuselage/src/components/FieldGroup/FieldGroup.spec.tsx
+++ b/packages/fuselage/src/components/FieldGroup/FieldGroup.spec.tsx
@@ -1,12 +1,12 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 
+import { render } from '../../testing';
 import * as stories from './FieldGroup.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[FieldGroup Component]', () => {
   it('renders without crashing', () => {
-    render(<Default />, { legacyRoot: true });
+    render(<Default />);
   });
 });
diff --git a/packages/fuselage/src/components/Flex/Flex.spec.tsx b/packages/fuselage/src/components/Flex/Flex.spec.tsx
index a4fdd4ff33..39cc9c2180 100644
--- a/packages/fuselage/src/components/Flex/Flex.spec.tsx
+++ b/packages/fuselage/src/components/Flex/Flex.spec.tsx
@@ -1,13 +1,12 @@
-import { render } from '@testing-library/react';
-
 import Flex from '.';
+import { render } from '../../testing';
 
 describe('[Flex Component]', () => {
   it('renders Flex.Container without crashing', () => {
-    render(<Flex.Container />, { legacyRoot: true });
+    render(<Flex.Container />);
   });
 
   it('renders Flex.Item without crashing', () => {
-    render(<Flex.Item />, { legacyRoot: true });
+    render(<Flex.Item />);
   });
 });
diff --git a/packages/fuselage/src/components/FramedIcon/FramedIcon.spec.tsx b/packages/fuselage/src/components/FramedIcon/FramedIcon.spec.tsx
index 668c059396..eaacfbc20b 100644
--- a/packages/fuselage/src/components/FramedIcon/FramedIcon.spec.tsx
+++ b/packages/fuselage/src/components/FramedIcon/FramedIcon.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './FramedIcon.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -13,7 +13,7 @@ describe('[FramedIcon rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -21,7 +21,7 @@ describe('[FramedIcon rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Grid/Grid.spec.tsx b/packages/fuselage/src/components/Grid/Grid.spec.tsx
index abbcd8e221..54ebd882f7 100644
--- a/packages/fuselage/src/components/Grid/Grid.spec.tsx
+++ b/packages/fuselage/src/components/Grid/Grid.spec.tsx
@@ -1,13 +1,12 @@
-import { render } from '@testing-library/react';
-
 import { Grid } from '.';
+import { render } from '../../testing';
 
 describe('[Grid Component]', () => {
   it('renders Grid without crashing', () => {
-    render(<Grid />, { legacyRoot: true });
+    render(<Grid />);
   });
 
   it('renders Grid.Item without crashing', () => {
-    render(<Grid.Item />, { legacyRoot: true });
+    render(<Grid.Item />);
   });
 });
diff --git a/packages/fuselage/src/components/Icon/Icon.spec.tsx b/packages/fuselage/src/components/Icon/Icon.spec.tsx
index 0179dffcd3..e45babbf55 100644
--- a/packages/fuselage/src/components/Icon/Icon.spec.tsx
+++ b/packages/fuselage/src/components/Icon/Icon.spec.tsx
@@ -1,9 +1,8 @@
-import { render } from '@testing-library/react';
-
 import { Icon } from '.';
+import { render } from '../../testing';
 
 describe('[Icon Component]', () => {
   it('renders without crashing', () => {
-    render(<Icon name='chat' />, { legacyRoot: true });
+    render(<Icon name='chat' />);
   });
 });
diff --git a/packages/fuselage/src/components/InputBox/InputBox.spec.tsx b/packages/fuselage/src/components/InputBox/InputBox.spec.tsx
index c39f7c5161..5414266674 100644
--- a/packages/fuselage/src/components/InputBox/InputBox.spec.tsx
+++ b/packages/fuselage/src/components/InputBox/InputBox.spec.tsx
@@ -1,19 +1,19 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './InputBox.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[InputBox Component]', () => {
   it('renders without crashing', () => {
-    const tree = render(<Default />, { legacyRoot: true });
+    const tree = render(<Default />);
     expect(tree.baseElement).toMatchSnapshot();
   });
 
   it('%s should have no a11y violations', async () => {
-    const { container } = render(<Default />, { legacyRoot: true });
+    const { container } = render(<Default />);
 
     const results = await axe(container);
     expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Label/Label.spec.tsx b/packages/fuselage/src/components/Label/Label.spec.tsx
index df7c22b8a2..88d8f12152 100644
--- a/packages/fuselage/src/components/Label/Label.spec.tsx
+++ b/packages/fuselage/src/components/Label/Label.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './Label.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -13,7 +13,7 @@ describe('[Label Component]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -21,7 +21,7 @@ describe('[Label Component]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Margins/Margins.spec.tsx b/packages/fuselage/src/components/Margins/Margins.spec.tsx
index 346dc1a16c..fa757af37c 100644
--- a/packages/fuselage/src/components/Margins/Margins.spec.tsx
+++ b/packages/fuselage/src/components/Margins/Margins.spec.tsx
@@ -1,18 +1,16 @@
-import { render } from '@testing-library/react';
-
 import Margins from '.';
+import { render } from '../../testing';
 
 describe('[Margins Component]', () => {
   it('renders without crashing', () => {
-    render(<Margins />, { legacyRoot: true });
+    render(<Margins />);
   });
 
   it('patches non-`Box` children', () => {
     const { container } = render(
       <Margins all='10px'>
         <div />
-      </Margins>,
-      { legacyRoot: true }
+      </Margins>
     );
 
     expect(container.firstElementChild).toHaveCssInJsClass();
diff --git a/packages/fuselage/src/components/Menu/Menu.spec.tsx b/packages/fuselage/src/components/Menu/Menu.spec.tsx
index c5d02220a9..eab1cd6b54 100644
--- a/packages/fuselage/src/components/Menu/Menu.spec.tsx
+++ b/packages/fuselage/src/components/Menu/Menu.spec.tsx
@@ -1,8 +1,9 @@
 import { composeStories } from '@storybook/react';
-import { act, render, screen } from '@testing-library/react';
+import { act, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { withResizeObserverMock } from 'testing-utils/mocks/withResizeObserverMock';
 
+import { render } from '../../testing';
 import * as stories from './Menu.stories';
 
 withResizeObserverMock();
@@ -13,13 +14,11 @@ describe('[Menu Component]', () => {
   const menuOption = screen.queryByText('Make Admin');
 
   it('should renders without crashing', () => {
-    render(<Simple {...Simple.args} />, { legacyRoot: true });
+    render(<Simple {...Simple.args} />);
   });
 
   it('should open options when click', async () => {
-    render(<Simple {...Simple.args} />, {
-      legacyRoot: true,
-    });
+    render(<Simple {...Simple.args} />);
     const button = screen.getByTestId('menu');
     await act(async () => {
       await userEvent.click(button);
@@ -28,9 +27,7 @@ describe('[Menu Component]', () => {
   });
 
   it('should have no options when click twice', async () => {
-    render(<Simple {...Simple.args} />, {
-      legacyRoot: true,
-    });
+    render(<Simple {...Simple.args} />);
     const button = screen.getByTestId('menu');
     await userEvent.click(button);
     await act(async () => {
@@ -40,9 +37,7 @@ describe('[Menu Component]', () => {
   });
 
   it('should have no options when click on menu and then elsewhere', async () => {
-    render(<Simple {...Simple.args} />, {
-      legacyRoot: true,
-    });
+    render(<Simple {...Simple.args} />);
     const button = screen.getByTestId('menu');
     await act(async () => {
       await userEvent.click(button);
diff --git a/packages/fuselage/src/components/Message/Message.spec.tsx b/packages/fuselage/src/components/Message/Message.spec.tsx
index 01c71ccb87..9246479b3e 100644
--- a/packages/fuselage/src/components/Message/Message.spec.tsx
+++ b/packages/fuselage/src/components/Message/Message.spec.tsx
@@ -1,12 +1,12 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 
+import { render } from '../../testing';
 import * as stories from './Messages.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[Message Component]', () => {
   it('renders without crashing', () => {
-    render(<Default />, { legacyRoot: true });
+    render(<Default />);
   });
 });
diff --git a/packages/fuselage/src/components/Message/MessageDivider/MessageDivider.spec.tsx b/packages/fuselage/src/components/Message/MessageDivider/MessageDivider.spec.tsx
index 63c7d5a1c3..04d8f42dd4 100644
--- a/packages/fuselage/src/components/Message/MessageDivider/MessageDivider.spec.tsx
+++ b/packages/fuselage/src/components/Message/MessageDivider/MessageDivider.spec.tsx
@@ -1,7 +1,6 @@
-import { render } from '@testing-library/react';
-
 import { MessageDivider } from '.';
+import { render } from '../../../testing';
 
 it('renders without crashing', () => {
-  render(<MessageDivider />, { legacyRoot: true });
+  render(<MessageDivider />);
 });
diff --git a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewCoverImage.spec.tsx b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewCoverImage.spec.tsx
index e734595859..046e4c3971 100644
--- a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewCoverImage.spec.tsx
+++ b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewCoverImage.spec.tsx
@@ -1,19 +1,16 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 
+import { render } from '../../../testing';
 import { MessageGenericPreviewCoverImage } from './MessageGenericPreviewCoverImage';
 
 describe('MessageGenericPreviewCoverImage', () => {
   it('renders without crashing', () => {
-    render(
-      <MessageGenericPreviewCoverImage url='' width={200} height={200} />,
-      { legacyRoot: true }
-    );
+    render(<MessageGenericPreviewCoverImage url='' width={200} height={200} />);
   });
 
   it('should render div with background image', () => {
     render(
-      <MessageGenericPreviewCoverImage url='test' width={200} height={200} />,
-      { legacyRoot: true }
+      <MessageGenericPreviewCoverImage url='test' width={200} height={200} />
     );
     const previewImage = screen.getByTestId('preview-image');
 
diff --git a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewImage.spec.tsx b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewImage.spec.tsx
index d35cecfd0f..f3cb7cb4da 100644
--- a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewImage.spec.tsx
+++ b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewImage.spec.tsx
@@ -1,14 +1,15 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 
+import { render } from '../../../testing';
 import { MessageGenericPreviewImage } from './MessageGenericPreviewImage';
 
 describe('MessageGenericPreviewImage', () => {
   it('renders without crashing', () => {
-    render(<MessageGenericPreviewImage url='' />, { legacyRoot: true });
+    render(<MessageGenericPreviewImage url='' />);
   });
 
   it('should render image', () => {
-    render(<MessageGenericPreviewImage url='test' />, { legacyRoot: true });
+    render(<MessageGenericPreviewImage url='test' />);
     const previewImage = screen.getByRole('presentation');
 
     expect(previewImage).toBeInTheDocument();
diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.spec.tsx b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.spec.tsx
index b208e1e368..225639a988 100644
--- a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.spec.tsx
+++ b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../../testing';
 import * as stories from './MessageMetrics.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -13,7 +13,7 @@ describe('[MessageMetrics Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -21,7 +21,7 @@ describe('[MessageMetrics Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Message/MessageReactions/MessageReactions.spec.tsx b/packages/fuselage/src/components/Message/MessageReactions/MessageReactions.spec.tsx
index e75f59adfc..0f1c5ba522 100644
--- a/packages/fuselage/src/components/Message/MessageReactions/MessageReactions.spec.tsx
+++ b/packages/fuselage/src/components/Message/MessageReactions/MessageReactions.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../../testing';
 import * as stories from './MessageReactions.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -13,7 +13,7 @@ describe('[MessageReactions Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -21,7 +21,7 @@ describe('[MessageReactions Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Message/MessageStatusIndicator/MessageStatusIndicator.spec.tsx b/packages/fuselage/src/components/Message/MessageStatusIndicator/MessageStatusIndicator.spec.tsx
index 9f9551c880..c88a3a84e8 100644
--- a/packages/fuselage/src/components/Message/MessageStatusIndicator/MessageStatusIndicator.spec.tsx
+++ b/packages/fuselage/src/components/Message/MessageStatusIndicator/MessageStatusIndicator.spec.tsx
@@ -1,12 +1,10 @@
-import { render } from '@testing-library/react';
-
 import { MessageStatusIndicator, MessageStatusIndicatorItem } from '.';
+import { render } from '../../../testing';
 
 it('renders without crashing', () => {
   render(
     <MessageStatusIndicator>
       <MessageStatusIndicatorItem name='star' variant='success' />
-    </MessageStatusIndicator>,
-    { legacyRoot: true }
+    </MessageStatusIndicator>
   );
 });
diff --git a/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.spec.tsx b/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.spec.tsx
index f6bf5fe8f1..3b4cd1486b 100644
--- a/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.spec.tsx
+++ b/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../../testing';
 import * as stories from './MessageSystem.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -12,7 +12,7 @@ const testCases = Object.values(composeStories(stories)).map((Story) => [
 test.each(testCases)(
   `renders %s without crashing`,
   async (_storyname, Story) => {
-    const tree = render(<Story />, { legacyRoot: true });
+    const tree = render(<Story />);
     expect(tree.baseElement).toMatchSnapshot();
   }
 );
@@ -20,7 +20,7 @@ test.each(testCases)(
 test.each(testCases)(
   '%s should have no a11y violations',
   async (_storyname, Story) => {
-    const { container } = render(<Story />, { legacyRoot: true });
+    const { container } = render(<Story />);
 
     const results = await axe(container);
     expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Message/MessageToolbar/MessageToolbar.spec.tsx b/packages/fuselage/src/components/Message/MessageToolbar/MessageToolbar.spec.tsx
index 191870fec2..c6a55e15c4 100644
--- a/packages/fuselage/src/components/Message/MessageToolbar/MessageToolbar.spec.tsx
+++ b/packages/fuselage/src/components/Message/MessageToolbar/MessageToolbar.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../../testing';
 import * as stories from './MessageToolbar.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -13,7 +13,7 @@ describe('[MessageToolbar Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -21,7 +21,7 @@ describe('[MessageToolbar Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.spec.tsx b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.spec.tsx
index b6391ed947..32e38a631a 100644
--- a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.spec.tsx
+++ b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.spec.tsx
@@ -1,7 +1,6 @@
-import { render } from '@testing-library/react';
-
 import ThreadMessage from '.';
+import { render } from '../../../testing';
 
 it('renders without crashing', () => {
-  render(<ThreadMessage />, { legacyRoot: true });
+  render(<ThreadMessage />);
 });
diff --git a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageOrigin.spec.tsx b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageOrigin.spec.tsx
index 3dcbcf3e77..8be00a7d09 100644
--- a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageOrigin.spec.tsx
+++ b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageOrigin.spec.tsx
@@ -1,16 +1,15 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 
+import { render } from '../../../testing';
 import { ThreadMessageOrigin } from './ThreadMessageOrigin';
 
 describe('ThreadMessageOrigin', () => {
   it('renders without crashing', () => {
-    render(<ThreadMessageOrigin />, { legacyRoot: true });
+    render(<ThreadMessageOrigin />);
   });
 
   it('should render system variation', () => {
-    render(<ThreadMessageOrigin system>system</ThreadMessageOrigin>, {
-      legacyRoot: true,
-    });
+    render(<ThreadMessageOrigin system>system</ThreadMessageOrigin>);
 
     expect(screen.getByText('system')).toHaveClass(
       'rcx-message-thread__origin--system'
diff --git a/packages/fuselage/src/components/Modal/Modal.spec.tsx b/packages/fuselage/src/components/Modal/Modal.spec.tsx
index e6ffdb7e66..15c6515f39 100644
--- a/packages/fuselage/src/components/Modal/Modal.spec.tsx
+++ b/packages/fuselage/src/components/Modal/Modal.spec.tsx
@@ -1,7 +1,8 @@
 import { composeStories } from '@storybook/react';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './Modal.stories';
 import { Default } from './Modal.stories';
 
@@ -14,7 +15,7 @@ describe('[Modal Component]', () => {
   test.each(testCases)(
     `%s should match the snapshot`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -22,7 +23,7 @@ describe('[Modal Component]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
@@ -30,7 +31,7 @@ describe('[Modal Component]', () => {
   );
 
   test('Default should render the dialog a11y compliant', () => {
-    render(<Default />, { legacyRoot: true });
+    render(<Default />);
     expect(screen.getByRole('dialog')).toBeInTheDocument();
   });
 });
diff --git a/packages/fuselage/src/components/MultiSelect/MultiSelect.spec.tsx b/packages/fuselage/src/components/MultiSelect/MultiSelect.spec.tsx
index 64a50f09db..67ae168215 100644
--- a/packages/fuselage/src/components/MultiSelect/MultiSelect.spec.tsx
+++ b/packages/fuselage/src/components/MultiSelect/MultiSelect.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { withResizeObserverMock } from 'testing-utils/mocks/withResizeObserverMock';
 
+import { render } from '../../testing';
 import * as stories from './MultiSelect.stories';
 
 const { Default } = composeStories(stories);
@@ -10,6 +10,6 @@ withResizeObserverMock();
 
 describe('[MultiSelect Component]', () => {
   it('renders without crashing', () => {
-    render(<Default />, { legacyRoot: true });
+    render(<Default />);
   });
 });
diff --git a/packages/fuselage/src/components/NavBar/NavBar.spec.tsx b/packages/fuselage/src/components/NavBar/NavBar.spec.tsx
index 3911812cfd..8a0f3e2727 100644
--- a/packages/fuselage/src/components/NavBar/NavBar.spec.tsx
+++ b/packages/fuselage/src/components/NavBar/NavBar.spec.tsx
@@ -1,8 +1,8 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 import { SSRProvider } from 'react-aria';
 
+import { render } from '../../testing';
 import * as stories from './NavBar.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -15,7 +15,6 @@ describe('[NavBar Component]', () => {
     `renders %s without crashing`,
     async (_storyname, Story) => {
       const tree = render(<Story />, {
-        legacyRoot: true,
         wrapper: ({ children }) => <SSRProvider>{children}</SSRProvider>,
       });
       expect(tree.baseElement).toMatchSnapshot();
@@ -25,7 +24,7 @@ describe('[NavBar Component]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx b/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx
index d2f8f55a5d..103953fc42 100644
--- a/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx
+++ b/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx
@@ -1,19 +1,19 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './NumberInput.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[NumberInput Component]', () => {
   it('renders without crashing', () => {
-    const tree = render(<Default />, { legacyRoot: true });
+    const tree = render(<Default />);
     expect(tree.baseElement).toMatchSnapshot();
   });
 
   it('%s should have no a11y violations', async () => {
-    const { container } = render(<Default />, { legacyRoot: true });
+    const { container } = render(<Default />);
 
     const results = await axe(container);
     expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Option/Option.spec.tsx b/packages/fuselage/src/components/Option/Option.spec.tsx
index aa10512026..4edda1f8a9 100644
--- a/packages/fuselage/src/components/Option/Option.spec.tsx
+++ b/packages/fuselage/src/components/Option/Option.spec.tsx
@@ -1,7 +1,6 @@
-import { render } from '@testing-library/react';
-
 import Option, { OptionContent } from '.';
 import { prevent } from '../../helpers/prevent';
+import { render } from '../../testing';
 
 jest.mock('../../helpers/prevent');
 
@@ -10,8 +9,7 @@ describe('Option', () => {
     render(
       <Option>
         <OptionContent>Lorem Ipsum Lorem</OptionContent>
-      </Option>,
-      { legacyRoot: true }
+      </Option>
     );
   });
 
@@ -21,8 +19,7 @@ describe('Option', () => {
     const { getByText } = render(
       <Option onClick={click}>
         <OptionContent>Option</OptionContent>
-      </Option>,
-      { legacyRoot: true }
+      </Option>
     );
 
     getByText('Option').click();
@@ -36,8 +33,7 @@ describe('Option', () => {
     const { getByText } = render(
       <Option disabled onClick={click}>
         <OptionContent>Option</OptionContent>
-      </Option>,
-      { legacyRoot: true }
+      </Option>
     );
 
     getByText('Option').click();
diff --git a/packages/fuselage/src/components/Options/Options.spec.tsx b/packages/fuselage/src/components/Options/Options.spec.tsx
index dc9780f332..ea2951ec7f 100644
--- a/packages/fuselage/src/components/Options/Options.spec.tsx
+++ b/packages/fuselage/src/components/Options/Options.spec.tsx
@@ -1,12 +1,12 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 
+import { render } from '../../testing';
 import * as stories from './Options.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[Message Component]', () => {
   it('renders without crashing', () => {
-    render(<Default />, { legacyRoot: true });
+    render(<Default />);
   });
 });
diff --git a/packages/fuselage/src/components/Pagination/Pagination.spec.tsx b/packages/fuselage/src/components/Pagination/Pagination.spec.tsx
index f3efef35e0..cb68035aab 100644
--- a/packages/fuselage/src/components/Pagination/Pagination.spec.tsx
+++ b/packages/fuselage/src/components/Pagination/Pagination.spec.tsx
@@ -1,9 +1,8 @@
-import { render } from '@testing-library/react';
-
+import { render } from '../../testing';
 import { Pagination } from './Pagination';
 
 describe('[Pagination Component]', () => {
   it('renders without crashing', () => {
-    render(<Pagination count={0} />, { legacyRoot: true });
+    render(<Pagination count={0} />);
   });
 });
diff --git a/packages/fuselage/src/components/PaletteStyleTag/PaletteStyleTag.spec.tsx b/packages/fuselage/src/components/PaletteStyleTag/PaletteStyleTag.spec.tsx
index 0ea1fad5ed..7c080bfe36 100644
--- a/packages/fuselage/src/components/PaletteStyleTag/PaletteStyleTag.spec.tsx
+++ b/packages/fuselage/src/components/PaletteStyleTag/PaletteStyleTag.spec.tsx
@@ -1,43 +1,36 @@
-import { render } from '@testing-library/react';
-
+import { render } from '../../testing';
 import PaletteStyleTag from './PaletteStyleTag';
 import { dark, light } from './lib/themePalettes';
 
 describe('[PaletteStyleTag colors]', () => {
   it('creates the Light theme style tag', () => {
-    render(<PaletteStyleTag theme='light' />, { legacyRoot: true });
+    render(<PaletteStyleTag theme='light' />);
     const style = document.querySelector('#main-palette');
     expect(style?.innerHTML).toContain(
       `surface-light: ${light['surface-light']}`
     );
   });
   it('creates the Dark theme style tag', () => {
-    render(<PaletteStyleTag theme='dark' />, { legacyRoot: true });
+    render(<PaletteStyleTag theme='dark' />);
     const style = document.querySelector('#main-palette');
     expect(style?.innerHTML).toContain(
       `surface-light: ${dark['surface-light']}`
     );
   });
   it('creates tag with the given id', () => {
-    render(<PaletteStyleTag theme='light' tagId='test-palette' />, {
-      legacyRoot: true,
-    });
+    render(<PaletteStyleTag theme='light' tagId='test-palette' />);
     const style = document.querySelector('#test-palette');
     expect(style).not.toBeNull();
   });
   it('creates tag with the given prefix', () => {
-    render(<PaletteStyleTag theme='light' prefix='--test' />, {
-      legacyRoot: true,
-    });
+    render(<PaletteStyleTag theme='light' prefix='--test' />);
     const style = document.querySelector('#main-palette');
     expect(style?.innerHTML).toContain(
       `--test-surface-light: ${light['surface-light']}`
     );
   });
   it('creates tag with the given selector', () => {
-    render(<PaletteStyleTag theme='light' selector='.test' />, {
-      legacyRoot: true,
-    });
+    render(<PaletteStyleTag theme='light' selector='.test' />);
     const style = document.querySelector('#main-palette');
     expect(style?.innerHTML).toContain('.test {');
   });
diff --git a/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx b/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx
index 28122cb83a..3adc8365f3 100644
--- a/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx
+++ b/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx
@@ -1,19 +1,19 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './PasswordInput.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[PasswordInput Component]', () => {
   it('renders without crashing', () => {
-    const tree = render(<Default />, { legacyRoot: true });
+    const tree = render(<Default />);
     expect(tree.baseElement).toMatchSnapshot();
   });
 
   it('%s should have no a11y violations', async () => {
-    const { container } = render(<Default />, { legacyRoot: true });
+    const { container } = render(<Default />);
 
     const results = await axe(container);
     expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Popover/Popover.spec.tsx b/packages/fuselage/src/components/Popover/Popover.spec.tsx
index e9aaa131f3..3a8379873b 100644
--- a/packages/fuselage/src/components/Popover/Popover.spec.tsx
+++ b/packages/fuselage/src/components/Popover/Popover.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './Popover.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -13,7 +13,7 @@ describe('[Popover Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -21,7 +21,7 @@ describe('[Popover Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/ProgressBar/ProgressBar.spec.tsx b/packages/fuselage/src/components/ProgressBar/ProgressBar.spec.tsx
index 93835257b5..9720cde92f 100644
--- a/packages/fuselage/src/components/ProgressBar/ProgressBar.spec.tsx
+++ b/packages/fuselage/src/components/ProgressBar/ProgressBar.spec.tsx
@@ -1,9 +1,8 @@
-import { render } from '@testing-library/react';
-
+import { render } from '../../testing';
 import { ProgressBar } from './ProgressBar';
 
 describe('[ProgressBar Component]', () => {
   it('renders without crashing', () => {
-    render(<ProgressBar percentage={0} />, { legacyRoot: true });
+    render(<ProgressBar percentage={0} />);
   });
 });
diff --git a/packages/fuselage/src/components/RadioButton/RadioButton.spec.tsx b/packages/fuselage/src/components/RadioButton/RadioButton.spec.tsx
index 89ca75a012..dc68f4baf5 100644
--- a/packages/fuselage/src/components/RadioButton/RadioButton.spec.tsx
+++ b/packages/fuselage/src/components/RadioButton/RadioButton.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './RadioButton.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -15,7 +15,7 @@ describe('[RadioButton Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -23,7 +23,7 @@ describe('[RadioButton Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
@@ -33,7 +33,7 @@ describe('[RadioButton Rendering]', () => {
 
 describe('[RadioButton Interacting]', () => {
   it('changes style of element as radio button is checked', () => {
-    const { container } = render(<Default />, { legacyRoot: true });
+    const { container } = render(<Default />);
     const radioButton = container.querySelector(
       'input[type="radio"]'
     ) as HTMLInputElement;
@@ -41,14 +41,14 @@ describe('[RadioButton Interacting]', () => {
     expect(radioButton.checked).toEqual(true);
   });
   it('displays radio button with defaultChecked value correctly', () => {
-    const { container } = render(<Checked />, { legacyRoot: true });
+    const { container } = render(<Checked />);
     const radioButton = container.querySelector(
       'input[type="radio"]'
     ) as HTMLInputElement;
     expect(radioButton.defaultChecked).toEqual(true);
   });
   it('displays radio button disabled correctly', () => {
-    const { container } = render(<Disabled />, { legacyRoot: true });
+    const { container } = render(<Disabled />);
     const radioButton = container.querySelector(
       'input[type="radio"]'
     ) as HTMLInputElement;
diff --git a/packages/fuselage/src/components/Scrollable/Scrollable.spec.tsx b/packages/fuselage/src/components/Scrollable/Scrollable.spec.tsx
index 9c077e78e1..06644c8def 100644
--- a/packages/fuselage/src/components/Scrollable/Scrollable.spec.tsx
+++ b/packages/fuselage/src/components/Scrollable/Scrollable.spec.tsx
@@ -1,9 +1,8 @@
-import { render } from '@testing-library/react';
-
+import { render } from '../../testing';
 import { Scrollable } from './Scrollable';
 
 describe('Scrollabe Component', () => {
   it('renders without crashing', () => {
-    render(<Scrollable />, { legacyRoot: true });
+    render(<Scrollable />);
   });
 });
diff --git a/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx b/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx
index fbbad48358..0cad14e3d5 100644
--- a/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx
+++ b/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx
@@ -1,19 +1,19 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './SearchInput.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[SearchInput Component]', () => {
   it('renders without crashing', () => {
-    const tree = render(<Default />, { legacyRoot: true });
+    const tree = render(<Default />);
     expect(tree.baseElement).toMatchSnapshot();
   });
 
   it('%s should have no a11y violations', async () => {
-    const { container } = render(<Default />, { legacyRoot: true });
+    const { container } = render(<Default />);
 
     const results = await axe(container);
     expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Select/Select.spec.tsx b/packages/fuselage/src/components/Select/Select.spec.tsx
index dfe0d5bc54..82ce7b1d6b 100644
--- a/packages/fuselage/src/components/Select/Select.spec.tsx
+++ b/packages/fuselage/src/components/Select/Select.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { withResizeObserverMock } from 'testing-utils/mocks/withResizeObserverMock';
 
+import { render } from '../../testing';
 import * as stories from './Select.stories';
 
 const { Default } = composeStories(stories);
@@ -10,6 +10,6 @@ withResizeObserverMock();
 
 describe('[Select Component]', () => {
   it('renders without crashing', () => {
-    render(<Default {...Default.args} />, { legacyRoot: true });
+    render(<Default {...Default.args} />);
   });
 });
diff --git a/packages/fuselage/src/components/SelectInput/SelectInput.spec.tsx b/packages/fuselage/src/components/SelectInput/SelectInput.spec.tsx
index 687da9158b..c1cb152b2b 100644
--- a/packages/fuselage/src/components/SelectInput/SelectInput.spec.tsx
+++ b/packages/fuselage/src/components/SelectInput/SelectInput.spec.tsx
@@ -1,19 +1,19 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './SelectInput.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[SelectInput Component]', () => {
   it('renders without crashing', () => {
-    const tree = render(<Default />, { legacyRoot: true });
+    const tree = render(<Default />);
     expect(tree.baseElement).toMatchSnapshot();
   });
 
   it('%s should have no a11y violations', async () => {
-    const { container } = render(<Default />, { legacyRoot: true });
+    const { container } = render(<Default />);
 
     const results = await axe(container);
     expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Sidebar/Sidebar.spec.tsx b/packages/fuselage/src/components/Sidebar/Sidebar.spec.tsx
index 42f975e005..b34eeb8d56 100644
--- a/packages/fuselage/src/components/Sidebar/Sidebar.spec.tsx
+++ b/packages/fuselage/src/components/Sidebar/Sidebar.spec.tsx
@@ -1,12 +1,12 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 
+import { render } from '../../testing';
 import * as stories from './Sidebar.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[Sidebar Component]', () => {
   it('renders without crashing', () => {
-    render(<Default />, { legacyRoot: true });
+    render(<Default />);
   });
 });
diff --git a/packages/fuselage/src/components/Sidebar/TopBar/TopBar.spec.tsx b/packages/fuselage/src/components/Sidebar/TopBar/TopBar.spec.tsx
index 22be58c96b..37f0e822a7 100644
--- a/packages/fuselage/src/components/Sidebar/TopBar/TopBar.spec.tsx
+++ b/packages/fuselage/src/components/Sidebar/TopBar/TopBar.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../../testing';
 import * as stories from './TopBar.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -13,7 +13,7 @@ describe('[TopBar Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -21,7 +21,7 @@ describe('[TopBar Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Skeleton/Skeleton.spec.tsx b/packages/fuselage/src/components/Skeleton/Skeleton.spec.tsx
index 3100109db8..aae68138ad 100644
--- a/packages/fuselage/src/components/Skeleton/Skeleton.spec.tsx
+++ b/packages/fuselage/src/components/Skeleton/Skeleton.spec.tsx
@@ -1,9 +1,8 @@
-import { render } from '@testing-library/react';
-
+import { render } from '../../testing';
 import { Skeleton } from './Skeleton';
 
 describe('[Skeleton Component]', () => {
   it('renders without crashing', () => {
-    render(<Skeleton />, { legacyRoot: true });
+    render(<Skeleton />);
   });
 });
diff --git a/packages/fuselage/src/components/Slider/Slider.spec.tsx b/packages/fuselage/src/components/Slider/Slider.spec.tsx
index 7866bb70fe..abf531974c 100644
--- a/packages/fuselage/src/components/Slider/Slider.spec.tsx
+++ b/packages/fuselage/src/components/Slider/Slider.spec.tsx
@@ -1,7 +1,7 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { composeStories } from '@storybook/react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
 
+import { render } from '../../testing';
 import * as stories from './Slider.stories';
 
 const { Default, WithLabel, MultiThumb, WithDefaultValue } =
@@ -9,30 +9,30 @@ const { Default, WithLabel, MultiThumb, WithDefaultValue } =
 
 describe('[Slider Component]', () => {
   it('renders without crashing', () => {
-    render(<Default />, { legacyRoot: true });
+    render(<Default />);
   });
 
   it('should display the label when passed', () => {
-    render(<WithLabel />, { legacyRoot: true });
+    render(<WithLabel />);
     const label = screen.queryByText('Range');
     expect(label).toBeInTheDocument();
     expect(label?.textContent).toBe('Range');
   });
 
   it('should output the defaultValue when passed', () => {
-    render(<WithDefaultValue />, { legacyRoot: true });
+    render(<WithDefaultValue />);
     const output = screen.queryByTestId('slider-output');
     expect(output?.textContent).toBe('25');
   });
 
   it('should have two thumbs when multiThumb prop is true', () => {
-    render(<MultiThumb />, { legacyRoot: true });
+    render(<MultiThumb />);
     const thumbs = screen.queryAllByRole('slider');
     expect(thumbs.length).toBe(2);
   });
 
   it("should update Thumb's position when Thumb is clicked and dragged", () => {
-    render(<Default />, { legacyRoot: true });
+    render(<Default />);
 
     const slider = screen.getByRole<HTMLFormElement>('slider');
 
diff --git a/packages/fuselage/src/components/States/States.spec.tsx b/packages/fuselage/src/components/States/States.spec.tsx
index dc9cceee53..d96e68c03b 100644
--- a/packages/fuselage/src/components/States/States.spec.tsx
+++ b/packages/fuselage/src/components/States/States.spec.tsx
@@ -1,9 +1,8 @@
-import { render } from '@testing-library/react';
-
+import { render } from '../../testing';
 import States from './States';
 
 describe('[States Component]', () => {
   it('renders without crashing', () => {
-    render(<States />, { legacyRoot: true });
+    render(<States />);
   });
 });
diff --git a/packages/fuselage/src/components/StatusBullet/StatusBullet.spec.tsx b/packages/fuselage/src/components/StatusBullet/StatusBullet.spec.tsx
index 9d10a92eff..be75abf420 100644
--- a/packages/fuselage/src/components/StatusBullet/StatusBullet.spec.tsx
+++ b/packages/fuselage/src/components/StatusBullet/StatusBullet.spec.tsx
@@ -1,9 +1,8 @@
-import { render } from '@testing-library/react';
-
+import { render } from '../../testing';
 import { StatusBullet } from './StatusBullet';
 
 describe('[StatusBullet Component]', () => {
   it('renders without crashing', () => {
-    render(<StatusBullet />, { legacyRoot: true });
+    render(<StatusBullet />);
   });
 });
diff --git a/packages/fuselage/src/components/Table/Table.spec.tsx b/packages/fuselage/src/components/Table/Table.spec.tsx
index 98b771021e..248e4b0076 100644
--- a/packages/fuselage/src/components/Table/Table.spec.tsx
+++ b/packages/fuselage/src/components/Table/Table.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './Table.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -13,7 +13,7 @@ describe('[Table Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -21,7 +21,7 @@ describe('[Table Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Tabs/Tabs.spec.tsx b/packages/fuselage/src/components/Tabs/Tabs.spec.tsx
index dba02ffe78..0c2b355f7e 100644
--- a/packages/fuselage/src/components/Tabs/Tabs.spec.tsx
+++ b/packages/fuselage/src/components/Tabs/Tabs.spec.tsx
@@ -1,9 +1,8 @@
-import { render } from '@testing-library/react';
-
+import { render } from '../../testing';
 import { Tabs } from './Tabs';
 
 describe('[Tabs Component]', () => {
   it('renders without crashing', () => {
-    render(<Tabs />, { legacyRoot: true });
+    render(<Tabs />);
   });
 });
diff --git a/packages/fuselage/src/components/Tag/Tag.spec.tsx b/packages/fuselage/src/components/Tag/Tag.spec.tsx
index 3929e7ee5f..e7f29c5890 100644
--- a/packages/fuselage/src/components/Tag/Tag.spec.tsx
+++ b/packages/fuselage/src/components/Tag/Tag.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './Tag.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -13,7 +13,7 @@ describe('[Tag Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -21,7 +21,7 @@ describe('[Tag Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx
index 77bff6548e..5fc6441dee 100644
--- a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx
+++ b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx
@@ -1,19 +1,19 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './TelephoneInput.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[TelephoneInput Component]', () => {
   it('renders without crashing', () => {
-    const tree = render(<Default />, { legacyRoot: true });
+    const tree = render(<Default />);
     expect(tree.baseElement).toMatchSnapshot();
   });
 
   it('%s should have no a11y violations', async () => {
-    const { container } = render(<Default />, { legacyRoot: true });
+    const { container } = render(<Default />);
 
     const results = await axe(container);
     expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/TextAreaInput/TextAreaInput.spec.tsx b/packages/fuselage/src/components/TextAreaInput/TextAreaInput.spec.tsx
index 93e40a057f..8706821687 100644
--- a/packages/fuselage/src/components/TextAreaInput/TextAreaInput.spec.tsx
+++ b/packages/fuselage/src/components/TextAreaInput/TextAreaInput.spec.tsx
@@ -1,9 +1,8 @@
-import { render } from '@testing-library/react';
-
+import { render } from '../../testing';
 import { TextAreaInput } from './TextAreaInput';
 
 describe('[TextAreaInput]', () => {
   it('renders without crashing', () => {
-    render(<TextAreaInput />, { legacyRoot: true });
+    render(<TextAreaInput />);
   });
 });
diff --git a/packages/fuselage/src/components/TextInput/TextInput.spec.tsx b/packages/fuselage/src/components/TextInput/TextInput.spec.tsx
index 3efce38340..c315873f90 100644
--- a/packages/fuselage/src/components/TextInput/TextInput.spec.tsx
+++ b/packages/fuselage/src/components/TextInput/TextInput.spec.tsx
@@ -1,19 +1,19 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './TextInput.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[TextInput Component]', () => {
   it('renders without crashing', () => {
-    const tree = render(<Default />, { legacyRoot: true });
+    const tree = render(<Default />);
     expect(tree.baseElement).toMatchSnapshot();
   });
 
   it('%s should have no a11y violations', async () => {
-    const { container } = render(<Default />, { legacyRoot: true });
+    const { container } = render(<Default />);
 
     const results = await axe(container);
     expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Throbber/Throbber.spec.tsx b/packages/fuselage/src/components/Throbber/Throbber.spec.tsx
index a3c417bc8b..b8744855ff 100644
--- a/packages/fuselage/src/components/Throbber/Throbber.spec.tsx
+++ b/packages/fuselage/src/components/Throbber/Throbber.spec.tsx
@@ -1,12 +1,12 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 
+import { render } from '../../testing';
 import * as stories from './Throbber.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[Throbber Component]', () => {
   it('renders without crashing', () => {
-    render(<Default />, { legacyRoot: true });
+    render(<Default />);
   });
 });
diff --git a/packages/fuselage/src/components/Tile/Tile.spec.tsx b/packages/fuselage/src/components/Tile/Tile.spec.tsx
index 9a42544112..8495a67d2c 100644
--- a/packages/fuselage/src/components/Tile/Tile.spec.tsx
+++ b/packages/fuselage/src/components/Tile/Tile.spec.tsx
@@ -1,9 +1,8 @@
-import { render } from '@testing-library/react';
-
+import { render } from '../../testing';
 import Tile from './Tile';
 
 describe('[Tile Component]', () => {
   it('renders without crashing', () => {
-    render(<Tile />, { legacyRoot: true });
+    render(<Tile />);
   });
 });
diff --git a/packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx b/packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx
index 4e490db414..fbc2725363 100644
--- a/packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx
+++ b/packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './ToastBar.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
@@ -13,7 +13,7 @@ describe('[ToastBar Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -21,7 +21,7 @@ describe('[ToastBar Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.spec.tsx b/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.spec.tsx
index 01a9dee8bd..a67ba10436 100644
--- a/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.spec.tsx
+++ b/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe, toHaveNoViolations } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './ToggleSwitch.stories';
 
 expect.extend(toHaveNoViolations);
@@ -15,7 +15,7 @@ describe('[ToggleSwitch Rendering]', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
-      const tree = render(<Story />, { legacyRoot: true });
+      const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
     }
   );
@@ -23,7 +23,7 @@ describe('[ToggleSwitch Rendering]', () => {
   test.each(testCases)(
     '%s should have no a11y violations',
     async (_storyname, Story) => {
-      const { container } = render(<Story />, { legacyRoot: true });
+      const { container } = render(<Story />);
 
       const results = await axe(container);
       expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/components/Tooltip/Tooltip.spec.tsx b/packages/fuselage/src/components/Tooltip/Tooltip.spec.tsx
index 6a53901792..1aeba7cd73 100644
--- a/packages/fuselage/src/components/Tooltip/Tooltip.spec.tsx
+++ b/packages/fuselage/src/components/Tooltip/Tooltip.spec.tsx
@@ -1,24 +1,23 @@
-import { render } from '@testing-library/react';
-
+import { render } from '../../testing';
 import * as stories from './Tooltip.stories';
 
 const { Default, LightTooltip } = stories;
 
 describe('[Tooltip Component]', () => {
   it('renders without crashing', () => {
-    render(<Default />, { legacyRoot: true });
+    render(<Default />);
   });
   it('renders text content correctly', () => {
-    const { container } = render(<Default />, { legacyRoot: true });
+    const { container } = render(<Default />);
     expect(container.firstChild).toHaveTextContent('An example tooltip');
   });
   it('has the correct class', () => {
-    const { container } = render(<Default />, { legacyRoot: true });
+    const { container } = render(<Default />);
     expect(container.firstChild).toHaveClass('rcx-tooltip--dark');
   });
   describe('Light Tooltip', () => {
     it('has the correct class', () => {
-      const { container } = render(<LightTooltip />, { legacyRoot: true });
+      const { container } = render(<LightTooltip />);
       expect(container.firstChild).toHaveClass('rcx-tooltip--light');
     });
   });
diff --git a/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx b/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx
index 933f73597b..6d78644cb0 100644
--- a/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx
+++ b/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx
@@ -1,19 +1,19 @@
 import { composeStories } from '@storybook/react';
-import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
+import { render } from '../../testing';
 import * as stories from './UrlInput.stories';
 
 const { Default } = composeStories(stories);
 
 describe('[UrlInput Component]', () => {
   it('renders without crashing', () => {
-    const tree = render(<Default />, { legacyRoot: true });
+    const tree = render(<Default />);
     expect(tree.baseElement).toMatchSnapshot();
   });
 
   it('%s should have no a11y violations', async () => {
-    const { container } = render(<Default />, { legacyRoot: true });
+    const { container } = render(<Default />);
 
     const results = await axe(container);
     expect(results).toHaveNoViolations();
diff --git a/packages/fuselage/src/testing.ts b/packages/fuselage/src/testing.ts
new file mode 100644
index 0000000000..0c9d557aca
--- /dev/null
+++ b/packages/fuselage/src/testing.ts
@@ -0,0 +1,34 @@
+import type {
+  queries,
+  Queries,
+  RenderOptions,
+  RenderResult,
+} from '@testing-library/react';
+import { render as renderOriginal } from '@testing-library/react';
+import type React from 'react';
+import type ReactDOMClient from 'react-dom';
+
+type RendererableContainer = ReactDOMClient.Container;
+type HydrateableContainer = Parameters<(typeof ReactDOMClient)['hydrate']>[0];
+
+/**
+ * Light wrapper around `react-testing-library` to provide a custom render function for transitioning to React 18
+ */
+export function render<
+  Q extends Queries = typeof queries,
+  Container extends RendererableContainer | HydrateableContainer = HTMLElement,
+  BaseElement extends RendererableContainer | HydrateableContainer = Container
+>(
+  ui: React.ReactNode,
+  options: RenderOptions<Q, Container, BaseElement>
+): RenderResult<Q, Container, BaseElement>;
+export function render(
+  ui: React.ReactNode,
+  options?: Omit<RenderOptions, 'queries'>
+): RenderResult;
+export function render(ui: React.ReactNode, options?: any): any {
+  return renderOriginal(ui, {
+    legacyRoot: true,
+    ...options,
+  });
+}
diff --git a/packages/mp3-encoder/package.json b/packages/mp3-encoder/package.json
index 9996127ed0..a85d82d544 100644
--- a/packages/mp3-encoder/package.json
+++ b/packages/mp3-encoder/package.json
@@ -53,7 +53,7 @@
     "bump": "workspace:~",
     "eslint": "~8.38.0",
     "jest": "~29.7.0",
-    "jest-environment-jsdom": "~29.5.0",
+    "jest-environment-jsdom": "~29.7.0",
     "lint-all": "workspace:~",
     "prettier": "~2.8.7",
     "rollup": "~3.20.4",
diff --git a/yarn.lock b/yarn.lock
index 6578abc32a..8227bdd260 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2643,18 +2643,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/environment@npm:^29.5.0":
-  version: 29.5.0
-  resolution: "@jest/environment@npm:29.5.0"
-  dependencies:
-    "@jest/fake-timers": "npm:^29.5.0"
-    "@jest/types": "npm:^29.5.0"
-    "@types/node": "npm:*"
-    jest-mock: "npm:^29.5.0"
-  checksum: 10/320d388d43b278aed2e17e082f1fa03913665a42551a0d30c5d7f73d098f074c003a8c3794286d09d6e592b723bab2223aa7f2b0eef6a6ba8f77399c16f0c3b0
-  languageName: node
-  linkType: hard
-
 "@jest/environment@npm:^29.7.0":
   version: 29.7.0
   resolution: "@jest/environment@npm:29.7.0"
@@ -2695,20 +2683,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/fake-timers@npm:^29.5.0":
-  version: 29.5.0
-  resolution: "@jest/fake-timers@npm:29.5.0"
-  dependencies:
-    "@jest/types": "npm:^29.5.0"
-    "@sinonjs/fake-timers": "npm:^10.0.2"
-    "@types/node": "npm:*"
-    jest-message-util: "npm:^29.5.0"
-    jest-mock: "npm:^29.5.0"
-    jest-util: "npm:^29.5.0"
-  checksum: 10/7e1e0817431b8b47fb7fec9b148c884c26ec8c613a1c64725ccf83ac776ddf76f9d0ddc7c60a74f25777cf2f0091861fcab538301ff9d537675df2b8ed71b100
-  languageName: node
-  linkType: hard
-
 "@jest/fake-timers@npm:^29.7.0":
   version: 29.7.0
   resolution: "@jest/fake-timers@npm:29.7.0"
@@ -4611,6 +4585,7 @@ __metadata:
     bump: "workspace:~"
     eslint: "npm:~8.38.0"
     jest: "npm:~29.7.0"
+    jest-environment-jsdom: "npm:~29.7.0"
     lint-all: "workspace:~"
     npm-run-all: "npm:^4.1.5"
     prettier: "npm:~2.8.7"
@@ -4882,7 +4857,7 @@ __metadata:
     bump: "workspace:~"
     eslint: "npm:~8.38.0"
     jest: "npm:~29.7.0"
-    jest-environment-jsdom: "npm:~29.5.0"
+    jest-environment-jsdom: "npm:~29.7.0"
     lint-all: "workspace:~"
     prettier: "npm:~2.8.7"
     rollup: "npm:~3.20.4"
@@ -6767,9 +6742,9 @@ __metadata:
   linkType: hard
 
 "@types/tough-cookie@npm:*":
-  version: 4.0.2
-  resolution: "@types/tough-cookie@npm:4.0.2"
-  checksum: 10/8682b4062959c15c0521361825839e10d374344fa84166ee0b731b815ac7b79a942f6e9192fad6383d69df2251021678c86c46748ff69c61609934a3e27472f2
+  version: 4.0.5
+  resolution: "@types/tough-cookie@npm:4.0.5"
+  checksum: 10/01fd82efc8202670865928629697b62fe9bf0c0dcbc5b1c115831caeb073a2c0abb871ff393d7df1ae94ea41e256cb87d2a5a91fd03cdb1b0b4384e08d4ee482
   languageName: node
   linkType: hard
 
@@ -7467,13 +7442,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-walk@npm:^8.0.0, acorn-walk@npm:^8.0.2, acorn-walk@npm:^8.1.1":
+"acorn-walk@npm:^8.0.0, acorn-walk@npm:^8.1.1":
   version: 8.2.0
   resolution: "acorn-walk@npm:8.2.0"
   checksum: 10/e69f7234f2adfeb16db3671429a7c80894105bd7534cb2032acf01bb26e6a847952d11a062d071420b43f8d82e33d2e57f26fe87d9cce0853e8143d8910ff1de
   languageName: node
   linkType: hard
 
+"acorn-walk@npm:^8.0.2":
+  version: 8.3.3
+  resolution: "acorn-walk@npm:8.3.3"
+  dependencies:
+    acorn: "npm:^8.11.0"
+  checksum: 10/59701dcb7070679622ba8e9c7f37577b4935565747ca0fd7c1c3ad30b3f1b1b008276282664e323b5495eb49f77fa12d3816fd06dc68e18f90fbebe759f71450
+  languageName: node
+  linkType: hard
+
 "acorn@npm:8.8.2":
   version: 8.8.2
   resolution: "acorn@npm:8.8.2"
@@ -7492,7 +7476,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.0.0, acorn@npm:^8.0.4, acorn@npm:^8.1.0, acorn@npm:^8.11.3, acorn@npm:^8.12.1, acorn@npm:^8.4.1, acorn@npm:^8.7.1, acorn@npm:^8.8.0, acorn@npm:^8.8.1, acorn@npm:^8.8.2":
+"acorn@npm:^8.0.0, acorn@npm:^8.0.4, acorn@npm:^8.1.0, acorn@npm:^8.11.0, acorn@npm:^8.11.3, acorn@npm:^8.12.1, acorn@npm:^8.4.1, acorn@npm:^8.7.1, acorn@npm:^8.8.0, acorn@npm:^8.8.1, acorn@npm:^8.8.2":
   version: 8.12.1
   resolution: "acorn@npm:8.12.1"
   bin:
@@ -10553,9 +10537,9 @@ __metadata:
   linkType: hard
 
 "entities@npm:^4.4.0":
-  version: 4.4.0
-  resolution: "entities@npm:4.4.0"
-  checksum: 10/b627cb900e901cc7817037b83bf993a1cbf6a64850540f7526af7bcf9c7d09ebc671198e6182cfae4680f733799e2852e6a1c46aa62ff36eb99680057a038df5
+  version: 4.5.0
+  resolution: "entities@npm:4.5.0"
+  checksum: 10/ede2a35c9bce1aeccd055a1b445d41c75a14a2bb1cd22e242f20cf04d236cdcd7f9c859eb83f76885327bfae0c25bf03303665ee1ce3d47c5927b98b0e3e3d48
   languageName: node
   linkType: hard
 
@@ -13737,24 +13721,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-environment-jsdom@npm:~29.5.0":
-  version: 29.5.0
-  resolution: "jest-environment-jsdom@npm:29.5.0"
+"jest-environment-jsdom@npm:~29.7.0":
+  version: 29.7.0
+  resolution: "jest-environment-jsdom@npm:29.7.0"
   dependencies:
-    "@jest/environment": "npm:^29.5.0"
-    "@jest/fake-timers": "npm:^29.5.0"
-    "@jest/types": "npm:^29.5.0"
+    "@jest/environment": "npm:^29.7.0"
+    "@jest/fake-timers": "npm:^29.7.0"
+    "@jest/types": "npm:^29.6.3"
     "@types/jsdom": "npm:^20.0.0"
     "@types/node": "npm:*"
-    jest-mock: "npm:^29.5.0"
-    jest-util: "npm:^29.5.0"
+    jest-mock: "npm:^29.7.0"
+    jest-util: "npm:^29.7.0"
     jsdom: "npm:^20.0.0"
   peerDependencies:
     canvas: ^2.5.0
   peerDependenciesMeta:
     canvas:
       optional: true
-  checksum: 10/a7cc3691389293ef282d9698f923cb38ff171763ae6bc125d292c12dfb025d659db9a34b8ec679a6b3b171a230af6bc27c734d6ff8e94dd93367b0a7865f27d4
+  checksum: 10/23bbfc9bca914baef4b654f7983175a4d49b0f515a5094ebcb8f819f28ec186f53c0ba06af1855eac04bab1457f4ea79dae05f70052cf899863e8096daa6e0f5
   languageName: node
   linkType: hard
 
@@ -13889,17 +13873,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-mock@npm:^29.5.0":
-  version: 29.5.0
-  resolution: "jest-mock@npm:29.5.0"
-  dependencies:
-    "@jest/types": "npm:^29.5.0"
-    "@types/node": "npm:*"
-    jest-util: "npm:^29.5.0"
-  checksum: 10/f76c4d226e8b27bfc372aeaa1b1ead490edc6af0d42b275b958260994b26f25f72f10dd1d9b8989fb4e7337c9126fde84e6f4bf5137f9b66b0fe2aed53bffd61
-  languageName: node
-  linkType: hard
-
 "jest-mock@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-mock@npm:29.7.0"
@@ -16768,9 +16741,9 @@ __metadata:
   linkType: hard
 
 "nwsapi@npm:^2.2.2":
-  version: 2.2.3
-  resolution: "nwsapi@npm:2.2.3"
-  checksum: 10/0f732019e3cc4aa8aaeca02125b97d4a2dc2dd27e4ddaefd8d75b8eeed58c50911e32ce60800efd84cf4ae9aa5280a82506b6a11a0e4f2692533166f42a66833
+  version: 2.2.12
+  resolution: "nwsapi@npm:2.2.12"
+  checksum: 10/172119e9ef492467ebfb337f9b5fd12a94d2b519377cde3f6ec2f74a86f6d5c00ef3873539bed7142f908ffca4e35383179be2319d04a563071d146bfa3f1673
   languageName: node
   linkType: hard
 
@@ -22688,7 +22661,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.11.0, ws@npm:^8.2.3":
+"ws@npm:^8.11.0":
+  version: 8.18.0
+  resolution: "ws@npm:8.18.0"
+  peerDependencies:
+    bufferutil: ^4.0.1
+    utf-8-validate: ">=5.0.2"
+  peerDependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: 10/70dfe53f23ff4368d46e4c0b1d4ca734db2c4149c6f68bc62cb16fc21f753c47b35fcc6e582f3bdfba0eaeb1c488cddab3c2255755a5c3eecb251431e42b3ff6
+  languageName: node
+  linkType: hard
+
+"ws@npm:^8.2.3":
   version: 8.13.0
   resolution: "ws@npm:8.13.0"
   peerDependencies: