@react-md/core 1.0.0-next.0 → 1.0.0-next.1

package/src/transition/__tests__/useTransition.tsx

@@ -1,6 +1,7 @@
 import {
   afterEach,
   beforeAll,
+  beforeEach,
   describe,
   expect,
   it,
@@ -12,16 +13,23 @@ import {
   type MutableRefObject,
   type ReactElement,
 } from "react";
-import { act, fireEvent, render, waitFor } from "../../test-utils/index.js";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "../../test-utils/index.js";
 
+import { SsrProvider, useSsr } from "../../SsrProvider.js";
+import { useLocalStorage } from "../../useLocalStorage.js";
+import { TRANSITION_CONFIG } from "../config.js";
 import {
   type TransitionHookOptions,
   type TransitionStage,
   type TransitionTimeout,
 } from "../types.js";
 import { useTransition } from "../useTransition.js";
-import { useLocalStorage } from "../../useLocalStorage.js";
-import { SsrProvider, useSsr } from "../../SsrProvider.js";
 
 const createStageRef = (): MutableRefObject<TransitionStage[]> => ({
   current: [],
@@ -71,6 +79,10 @@ describe("useTransition", () => {
     jest.useFakeTimers();
   });
 
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   afterEach(() => {
     jest.clearAllTimers();
   });
@@ -78,31 +90,39 @@ describe("useTransition", () => {
   it("should default to enabling enter and exit transitions and non-temporary", () => {
     const stageRef = createStageRef();
     const stages = stageRef.current;
-    const { getByRole, getByText } = render(<Test stageRef={stageRef} />);
-    const toggle = getByRole("button", { name: "Toggle" });
+    render(<Test stageRef={stageRef} />);
+    const toggle = screen.getByRole("button", { name: "Toggle" });
 
-    expect(() => getByText(`The current stage is: "exited"`)).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "exited"`)
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
     expect(stages).toEqual(["exited"]);
 
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByText(`The current stage is: "exited"`)).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "exited"`)
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
 
     fireEvent.click(toggle);
     expect(stages).toEqual(["exited", "enter", "entering"]);
-    expect(() => getByText(`The current stage is: "entering"`)).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "entering"`)
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
     });
 
     expect(stages).toEqual(["exited", "enter", "entering", "entered"]);
-    expect(() => getByText(`The current stage is: "entered"`)).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "entered"`)
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
 
     // Exit flow
     fireEvent.click(toggle);
@@ -114,8 +134,10 @@ describe("useTransition", () => {
       "exit",
       "exiting",
     ]);
-    expect(() => getByText(`The current stage is: "exiting"`)).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "exiting"`)
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
@@ -129,31 +151,33 @@ describe("useTransition", () => {
       "exiting",
       "exited",
     ]);
-    expect(() => getByText(`The current stage is: "exited"`)).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "exited"`)
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
   });
 
   it("should mount and unmount the component if the temporary option is enabled", () => {
-    const { getByRole, getByText } = render(<Test temporary />);
+    render(<Test temporary />);
 
-    const toggle = getByRole("button");
-    expect(() => getByText(/^The current stage/)).toThrow();
+    const toggle = screen.getByRole("button");
+    expect(() => screen.getByText(/^The current stage/)).toThrow();
 
     fireEvent.click(toggle);
-    expect(() => getByText(/^The current stage/)).not.toThrow();
+    expect(() => screen.getByText(/^The current stage/)).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByText(/^The current stage/)).not.toThrow();
+    expect(() => screen.getByText(/^The current stage/)).not.toThrow();
 
     fireEvent.click(toggle);
-    expect(() => getByText(/^The current stage/)).not.toThrow();
+    expect(() => screen.getByText(/^The current stage/)).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByText(/^The current stage/)).toThrow();
+    expect(() => screen.getByText(/^The current stage/)).toThrow();
   });
 
   it("should trigger the callbacks at each stage", () => {
@@ -172,8 +196,8 @@ describe("useTransition", () => {
       onExited,
     };
 
-    const { getByRole } = render(<Test {...props} />);
-    const toggle = getByRole("button");
+    render(<Test {...props} />);
+    const toggle = screen.getByRole("button");
 
     expect(onEnter).not.toHaveBeenCalled();
     expect(onEntering).not.toHaveBeenCalled();
@@ -220,73 +244,89 @@ describe("useTransition", () => {
   });
 
   it("should handle non-temporary appear transitions correctly", () => {
-    const { getByText, getByRole, rerender } = render(<Test appear />);
-    expect(() => getByText('The current stage is: "exited"')).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    const { rerender } = render(<Test appear />);
+    expect(() =>
+      screen.getByText('The current stage is: "exited"')
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByText('The current stage is: "exited"')).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() =>
+      screen.getByText('The current stage is: "exited"')
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
 
     rerender(<Test appear defaultTransitionIn key="new-key" />);
-    expect(() => getByText('The current stage is: "entering"')).not.toThrow();
-    expect(() => getByText("Appearing: true")).not.toThrow();
+    expect(() =>
+      screen.getByText('The current stage is: "entering"')
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: true")).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByText('The current stage is: "entered"')).not.toThrow();
-    expect(() => getByText("Appearing: true")).not.toThrow();
+    expect(() =>
+      screen.getByText('The current stage is: "entered"')
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: true")).not.toThrow();
 
-    fireEvent.click(getByRole("button"));
-    expect(() => getByText('The current stage is: "exiting"')).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    fireEvent.click(screen.getByRole("button"));
+    expect(() =>
+      screen.getByText('The current stage is: "exiting"')
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByText('The current stage is: "exited"')).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() =>
+      screen.getByText('The current stage is: "exited"')
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
   });
 
   it("should handle temporary appear transitions correctly", () => {
-    const { getByRole, getByText, rerender } = render(
-      <Test appear temporary />
-    );
-    expect(() => getByText(/^The current stage is/)).toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    const { rerender } = render(<Test appear temporary />);
+    expect(() => screen.getByText(/^The current stage is/)).toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByText(/^The current stage is/)).toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() => screen.getByText(/^The current stage is/)).toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
 
     rerender(<Test appear temporary defaultTransitionIn key="new-key" />);
-    expect(() => getByText('The current stage is: "entering"')).not.toThrow();
-    expect(() => getByText("Appearing: true")).not.toThrow();
+    expect(() =>
+      screen.getByText('The current stage is: "entering"')
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: true")).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByText('The current stage is: "entered"')).not.toThrow();
-    expect(() => getByText("Appearing: true")).not.toThrow();
+    expect(() =>
+      screen.getByText('The current stage is: "entered"')
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: true")).not.toThrow();
 
-    fireEvent.click(getByRole("button"));
-    expect(() => getByText('The current stage is: "exiting"')).not.toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    fireEvent.click(screen.getByRole("button"));
+    expect(() =>
+      screen.getByText('The current stage is: "exiting"')
+    ).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByText(/^The current stage is/)).toThrow();
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() => screen.getByText(/^The current stage is/)).toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
   });
 
   it("should access the element's scrollTop attribute to trigger a reflow when the reflow option is enabled and the stage is not entered or exited", () => {
     const scrollTop = jest.spyOn(Element.prototype, "scrollTop", "get");
-    const { getByRole } = render(<Test reflow />);
-    const toggle = getByRole("button", { name: "Toggle" });
+    render(<Test reflow />);
+    const toggle = screen.getByRole("button", { name: "Toggle" });
 
     expect(scrollTop).not.toHaveBeenCalled();
 
@@ -308,25 +348,33 @@ describe("useTransition", () => {
   it("should cancel the timeouts and immediately switch to the new transition if a new transition starts before the previous has been completed", () => {
     const stageRef = createStageRef();
     const stages = stageRef.current;
-    const { getByRole, getByText } = render(<Test stageRef={stageRef} />);
-    const toggle = getByRole("button", { name: "Toggle" });
+    render(<Test stageRef={stageRef} />);
+    const toggle = screen.getByRole("button", { name: "Toggle" });
 
-    expect(() => getByText(`The current stage is: "exited"`)).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "exited"`)
+    ).not.toThrow();
     expect(stages).toEqual(["exited"]);
 
     fireEvent.click(toggle);
     expect(stages).toEqual(["exited", "enter", "entering"]);
-    expect(() => getByText(`The current stage is: "entering"`)).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "entering"`)
+    ).not.toThrow();
 
     act(() => {
       jest.advanceTimersByTime(300);
     });
     expect(stages).toEqual(["exited", "enter", "entering"]);
-    expect(() => getByText(`The current stage is: "entering"`)).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "entering"`)
+    ).not.toThrow();
 
     fireEvent.click(toggle);
     expect(stages).toEqual(["exited", "enter", "entering", "exit", "exiting"]);
-    expect(() => getByText(`The current stage is: "exiting"`)).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "exiting"`)
+    ).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
@@ -339,7 +387,9 @@ describe("useTransition", () => {
       "exiting",
       "exited",
     ]);
-    expect(() => getByText(`The current stage is: "exited"`)).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "exited"`)
+    ).not.toThrow();
 
     fireEvent.click(toggle);
     act(() => {
@@ -368,7 +418,9 @@ describe("useTransition", () => {
       "entering",
       "entered",
     ]);
-    expect(() => getByText(`The current stage is: "entered"`)).not.toThrow();
+    expect(() =>
+      screen.getByText(`The current stage is: "entered"`)
+    ).not.toThrow();
   });
 
   it("should skip the enter, entering, exit, and exiting stages if the transition in disabled", () => {
@@ -388,8 +440,8 @@ describe("useTransition", () => {
       timeout: 0,
     };
 
-    const { getByRole } = render(<Test {...props} />);
-    const toggle = getByRole("button");
+    render(<Test {...props} />);
+    const toggle = screen.getByRole("button");
 
     expect(onEnter).not.toHaveBeenCalled();
     expect(onEntering).not.toHaveBeenCalled();
@@ -469,4 +521,49 @@ describe("useTransition", () => {
     });
     expect(stages).toEqual(["exited"]);
   });
+
+  it("should skip transitions if the TRANSITION_CONFIG ha disabled set to true", () => {
+    jest.spyOn(TRANSITION_CONFIG, "disabled", "get").mockReturnValue(true);
+
+    const onEnter = jest.fn();
+    const onEntering = jest.fn();
+    const onEntered = jest.fn();
+    const onExit = jest.fn();
+    const onExiting = jest.fn();
+    const onExited = jest.fn();
+    const props: TestProps = {
+      onEnter,
+      onEntering,
+      onEntered,
+      onExit,
+      onExiting,
+      onExited,
+    };
+
+    render(<Test {...props} />);
+    const toggle = screen.getByRole("button");
+
+    expect(onEnter).not.toHaveBeenCalled();
+    expect(onEntering).not.toHaveBeenCalled();
+    expect(onEntered).not.toHaveBeenCalled();
+    expect(onExit).not.toHaveBeenCalled();
+    expect(onExiting).not.toHaveBeenCalled();
+    expect(onExited).not.toHaveBeenCalled();
+
+    fireEvent.click(toggle);
+    expect(onEnter).not.toHaveBeenCalled();
+    expect(onEntering).not.toHaveBeenCalled();
+    expect(onEntered).toHaveBeenCalledTimes(1);
+    expect(onExit).not.toHaveBeenCalled();
+    expect(onExiting).not.toHaveBeenCalled();
+    expect(onExited).not.toHaveBeenCalled();
+
+    fireEvent.click(toggle);
+    expect(onEnter).not.toHaveBeenCalled();
+    expect(onEntering).not.toHaveBeenCalled();
+    expect(onEntered).toHaveBeenCalledTimes(1);
+    expect(onExit).not.toHaveBeenCalled();
+    expect(onExiting).not.toHaveBeenCalled();
+    expect(onExited).toHaveBeenCalledTimes(1);
+  });
 });

package/src/transition/config.ts

@@ -0,0 +1,34 @@
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TransitionConfig {
+  /**
+   * Set this to `true` to disable all transitions from `react-md`.
+   *
+   * Note: It is recommended to set this to `true` in testing to keep things
+   * simple and will automatically be set when using:
+   *
+   * ```ts
+   * import "@react-md/core/test-utils/jest-setup.js";
+   * ```
+   *
+   * @defaultValue `false`
+   */
+  disabled: boolean;
+}
+
+// NOTE: Uses get/set for test mocking
+
+let disabled = false;
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export const TRANSITION_CONFIG: TransitionConfig = {
+  get disabled() {
+    return disabled;
+  },
+  set disabled(nextDisabled: boolean) {
+    disabled = nextDisabled;
+  },
+};

package/src/transition/useTransition.ts

@@ -10,6 +10,7 @@ import type {
   TransitionState,
 } from "./types.js";
 import { getTransitionTimeout } from "./utils.js";
+import { TRANSITION_CONFIG } from "./config.js";
 
 const INITIAL_STATE: TransitionState = {
   appearing: false,
@@ -143,11 +144,11 @@ export function useTransition<E extends HTMLElement>(
     () => {
       let stage: TransitionStage = "exited";
       if (transitionIn) {
-        stage = appear ? "enter" : "entered";
+        stage = appear && !TRANSITION_CONFIG.disabled ? "enter" : "entered";
       }
 
       return {
-        appearing: appear && transitionIn,
+        appearing: appear && transitionIn && !TRANSITION_CONFIG.disabled,
         rendered: !temporary || transitionIn,
         stage,
       };
@@ -211,8 +212,12 @@ export function useTransition<E extends HTMLElement>(
     let nextStage: TransitionStage = stage;
     switch (stage) {
       case "enter":
-        onEnter(appearing);
-        nextStage = "entering";
+        if (TRANSITION_CONFIG.disabled) {
+          nextStage = "entered";
+        } else {
+          onEnter(appearing);
+          nextStage = "entering";
+        }
         break;
       case "entering":
         onEntering(appearing);
@@ -223,8 +228,12 @@ export function useTransition<E extends HTMLElement>(
         onEntered(appearing);
         break;
       case "exit":
-        onExit();
-        nextStage = "exiting";
+        if (TRANSITION_CONFIG.disabled) {
+          nextStage = "exited";
+        } else {
+          onExit();
+          nextStage = "exiting";
+        }
         break;
       case "exiting":
         onExiting();

package/src/tree/DefaultTreeItemRenderer.tsx

@@ -1,5 +1,5 @@
 import { type ReactElement } from "react";
-import { type RenderRecursiveItemsProps } from "../utils/RenderRecursively.jsx";
+import { type RenderRecursiveItemsProps } from "../utils/RenderRecursively.js";
 import { TreeItem } from "./TreeItem.js";
 import { type DefaultTreeItemNode, type TreeItemNode } from "./types.js";
 

package/src/tree/Tree.tsx

@@ -6,10 +6,7 @@ import {
   type ReactNode,
   type Ref,
 } from "react";
-import {
-  LinkProvider,
-  type CustomLinkComponent,
-} from "../link/LinkProvider.js";
+import { type CustomLinkComponent } from "../link/Link.js";
 import { List } from "../list/List.js";
 import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import { type LabelRequiredForA11y } from "../types.js";
@@ -261,7 +258,7 @@ export function Tree<T extends TreeItemNode>(
     expansionMode = "auto",
     expanderIcon,
     expanderLeft = false,
-    linkComponent,
+    linkComponent = "a",
     disableTransition = false,
     temporaryChildItems = false,
     ...remaining
@@ -290,6 +287,7 @@ export function Tree<T extends TreeItemNode>(
       data={data}
       rootId={rootId}
       multiSelect={multiSelect}
+      linkComponent={linkComponent}
       selectedIds={selectedIds}
       expandedIds={expandedIds}
       expanderIcon={expanderIcon}
@@ -303,25 +301,23 @@ export function Tree<T extends TreeItemNode>(
       selectMultipleTreeItems={selectMultipleTreeItems}
       expandMultipleTreeItems={expandMultipleTreeItems}
     >
-      <LinkProvider value={linkComponent}>
-        <KeyboardMovementProvider value={movementContext}>
-          <List
-            {...remaining}
-            {...movementProps}
-            id={treeId}
-            ref={treeRef}
-            role="tree"
-            tabIndex={0}
-            className={tree({ className })}
-          >
-            <RenderRecursively
-              items={items}
-              getItemKey={(item) => item.itemId}
-              render={TreeItemRenderer}
-            />
-          </List>
-        </KeyboardMovementProvider>
-      </LinkProvider>
+      <KeyboardMovementProvider value={movementContext}>
+        <List
+          {...remaining}
+          {...movementProps}
+          id={treeId}
+          ref={treeRef}
+          role="tree"
+          tabIndex={0}
+          className={tree({ className })}
+        >
+          <RenderRecursively
+            items={items}
+            getItemKey={(item) => item.itemId}
+            render={TreeItemRenderer}
+          />
+        </List>
+      </KeyboardMovementProvider>
     </TreeProvider>
   );
 }

package/src/tree/TreeItem.tsx

@@ -8,7 +8,6 @@ import {
 } from "react";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
-import { useLink } from "../link/LinkProvider.js";
 import { ListItemChildren } from "../list/ListItemChildren.js";
 import { useKeyboardMovementContext } from "../movement/useKeyboardMovementProvider.js";
 import { type PropsWithRef } from "../types.js";
@@ -148,11 +147,12 @@ export function TreeItem(props: TreeItemProps): ReactElement {
   }
 
   const {
-    metadataLookup,
     expandedIds,
     selectedIds,
     expanderLeft,
     expansionMode,
+    metadataLookup,
+    linkComponent: Link,
     toggleTreeItemSelection,
     toggleTreeItemExpansion,
     disableTransition: contextDisableTransition,
@@ -203,7 +203,6 @@ export function TreeItem(props: TreeItemProps): ReactElement {
     });
 
   const isLink = !!(remaining.to || remaining.href);
-  const Link = useLink();
 
   // cheating a bit so there are type errors around the event handlers
   const ContentComponent = (isLink ? Link : "span") as "span";

package/src/tree/TreeProvider.tsx

@@ -6,6 +6,7 @@ import {
   type ReactElement,
   type ReactNode,
 } from "react";
+import { type CustomLinkComponent } from "../link/Link.js";
 import { type NonNullRef } from "../types.js";
 import {
   type DefaultTreeItemNode,
@@ -82,6 +83,8 @@ export interface TreeContext<T extends TreeItemNode = DefaultTreeItemNode>
   disableTransition: boolean;
   temporaryChildItems: boolean;
 
+  linkComponent: CustomLinkComponent;
+
   /** @internal */
   expanderLeft: boolean;
   /** @internal */
@@ -144,6 +147,7 @@ export function TreeProvider<T extends TreeItemNode = DefaultTreeItemNode>(
     metadataLookup,
     disableTransition,
     temporaryChildItems,
+    linkComponent,
     expandedIds,
     selectedIds,
     expandMultipleTreeItems,
@@ -162,6 +166,7 @@ export function TreeProvider<T extends TreeItemNode = DefaultTreeItemNode>(
       metadataLookup,
       disableTransition,
       temporaryChildItems,
+      linkComponent,
       expandedIds,
       selectedIds,
       expandMultipleTreeItems,
@@ -177,6 +182,7 @@ export function TreeProvider<T extends TreeItemNode = DefaultTreeItemNode>(
       expanderIcon,
       expanderLeft,
       expansionMode,
+      linkComponent,
       metadataLookup,
       multiSelect,
       rootId,

package/src/tree/__tests__/Tree.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, it, jest } from "@jest/globals";
+import { beforeEach, describe, expect, it, jest } from "@jest/globals";
 import {
   createRef,
   forwardRef,
@@ -15,7 +15,8 @@ import {
 
 import { Divider } from "../../divider/Divider.js";
 import { FontIcon } from "../../icon/FontIcon.js";
-import { type RenderRecursiveItemsProps } from "../../utils/RenderRecursively.jsx";
+import { TRANSITION_CONFIG } from "../../transition/config.js";
+import { type RenderRecursiveItemsProps } from "../../utils/RenderRecursively.js";
 import { alphaNumericSort } from "../../utils/alphaNumericSort.js";
 import { isElementVisible } from "../../utils/isElementVisible.js";
 import { DefaultTreeItemRenderer } from "../DefaultTreeItemRenderer.js";
@@ -148,6 +149,10 @@ function Test(props: TestProps): ReactElement {
 }
 
 describe("Tree", () => {
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   it("should apply the correct styling, HTML attributes, and allow a ref", () => {
     const ref = createRef<HTMLUListElement>();
     const props = {