diff --git a/src/lib/directives/transition.directives.ts b/src/lib/directives/transition.directives.ts
new file mode 100644
index 000000000..ae9841899
--- /dev/null
+++ b/src/lib/directives/transition.directives.ts
@@ -0,0 +1,67 @@
+import {
+  fade as svelteFade,
+  fly as svelteFly,
+  scale as svelteScale,
+  type FadeParams,
+  type TransitionConfig,
+} from "svelte/transition";
+
+/**
+ * A wrapper around Svelte's `fade` transition that disables itself in test mode.
+ *
+ * Prevents the test error "Cannot set properties of undefined (setting 'onfinish')".
+ *
+ * @param {HTMLElement} node - The HTML element to apply the transition to.
+ * @param {FadeParams} [params] - Optional parameters for the fade transition.
+ * @returns {TransitionConfig} The transition configuration, or an empty object in test mode.
+ */
+export const testSafeFade = (
+  node: HTMLElement,
+  params?: FadeParams | undefined,
+): TransitionConfig => {
+  if (process.env.NODE_ENV === "test") {
+    return {};
+  }
+
+  return svelteFade(node, params);
+};
+
+/**
+ * A wrapper around Svelte's `fly` transition that disables itself in test mode.
+ *
+ * Prevents the test error "Cannot set properties of undefined (setting 'onfinish')".
+ *
+ * @param {HTMLElement} node - The HTML element to apply the transition to.
+ * @param {FlyParams} [params] - Optional parameters for the fly transition.
+ * @returns {TransitionConfig} The transition configuration, or an empty object in test mode.
+ */
+export const testSafeFly = (
+  node: HTMLElement,
+  params?: FadeParams | undefined,
+): TransitionConfig => {
+  if (process.env.NODE_ENV === "test") {
+    return {};
+  }
+
+  return svelteFly(node, params);
+};
+
+/**
+ * A wrapper around Svelte's `scale` transition that disables itself in test mode.
+ *
+ * Prevents the test error "Cannot set properties of undefined (setting 'onfinish')".
+ *
+ * @param {HTMLElement} node - The HTML element to apply the transition to.
+ * @param {ScaleParams} [params] - Optional parameters for the scale transition.
+ * @returns {TransitionConfig} The transition configuration, or an empty object in test mode.
+ */
+export const testSafeScale = (
+  node: HTMLElement,
+  params?: FadeParams | undefined,
+): TransitionConfig => {
+  if (process.env.NODE_ENV === "test") {
+    return {};
+  }
+
+  return svelteScale(node, params);
+};
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 0cfe15f86..4333ba4f5 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,5 +1,6 @@
 export * from "./components";
 export * from "./constants/constants";
+export * from "./directives/transition.directives";
 export * from "./icons";
 export * from "./stores/busy.store";
 export * from "./stores/layout.store";