@copilotkit/vue 1.57.1

package/src/v2/providers/__tests__/CopilotKitProvider.stability.test.ts

@@ -0,0 +1,871 @@
+import { cleanup, render } from "@testing-library/vue";
+import { defineComponent, nextTick, ref, watchEffect } from "vue";
+import type { Component, PropType } from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { z } from "zod";
+import type { VueFrontendTool } from "../../types";
+import type { CopilotKitCoreVue } from "../../lib/vue-core";
+import CopilotKitProvider from "../CopilotKitProvider.vue";
+import { useCopilotKit } from "../useCopilotKit";
+import type { CopilotKitContextValue } from "../keys";
+import { useFrontendTool } from "../../hooks/use-frontend-tool";
+
+let consoleErrorSpy: ReturnType<typeof vi.spyOn>;
+let consoleWarnSpy: ReturnType<typeof vi.spyOn>;
+
+function renderProvider(args: {
+  child: Component;
+  frontendTools?: VueFrontendTool[];
+  runtimeUrl?: string;
+}) {
+  const Host = defineComponent({
+    components: {
+      CopilotKitProvider,
+      ChildComponent: args.child,
+    },
+    props: {
+      frontendTools: {
+        type: Array as PropType<VueFrontendTool[]>,
+        required: false,
+      },
+      runtimeUrl: {
+        type: String,
+        required: false,
+      },
+    },
+    template: `
+      <CopilotKitProvider :runtime-url="runtimeUrl" :frontend-tools="frontendTools">
+        <ChildComponent />
+      </CopilotKitProvider>
+    `,
+  });
+
+  return render(Host, {
+    props: {
+      frontendTools: args.frontendTools,
+      runtimeUrl: args.runtimeUrl,
+    },
+  });
+}
+
+describe("CopilotKitProvider stability", () => {
+  const originalFetch = global.fetch;
+
+  beforeEach(() => {
+    consoleErrorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    consoleWarnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    cleanup();
+    consoleErrorSpy.mockRestore();
+    consoleWarnSpy.mockRestore();
+    global.fetch = originalFetch;
+  });
+
+  describe("instance stability", () => {
+    it("returns the same copilotkit instance after re-render with new renderToolCalls array", async () => {
+      const instances: CopilotKitCoreVue[] = [];
+
+      const Collector = defineComponent({
+        setup() {
+          const { copilotkit } = useCopilotKit();
+          watchEffect(() => {
+            instances.push(copilotkit.value);
+          });
+          return () => null;
+        },
+      });
+
+      const Renderer1 = defineComponent({ template: "<div>Tool 1</div>" });
+      const Renderer2 = defineComponent({
+        template: "<div>Tool 1 updated</div>",
+      });
+
+      const renderToolCalls1: VueFrontendTool[] = [
+        {
+          name: "tool1",
+          description: "Tool 1",
+          parameters: z.object({ a: z.string() }),
+          render: Renderer1,
+        },
+      ];
+
+      const renderToolCalls2: VueFrontendTool[] = [
+        {
+          name: "tool1",
+          description: "Tool 1",
+          parameters: z.object({ a: z.string() }),
+          render: Renderer2,
+        },
+      ];
+
+      const view = renderProvider({
+        child: Collector,
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: renderToolCalls1,
+      });
+
+      await nextTick();
+      await view.rerender({
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: renderToolCalls2,
+      });
+      await nextTick();
+
+      expect(instances.length).toBeGreaterThanOrEqual(2);
+      const first = instances[0];
+      for (const instance of instances) {
+        expect(instance).toBe(first);
+      }
+    });
+
+    it("returns the same copilotkit instance after re-render with new frontendTools array", async () => {
+      const instances: CopilotKitCoreVue[] = [];
+
+      const Collector = defineComponent({
+        setup() {
+          const { copilotkit } = useCopilotKit();
+          watchEffect(() => {
+            instances.push(copilotkit.value);
+          });
+          return () => null;
+        },
+      });
+
+      const tools1: VueFrontendTool[] = [
+        { name: "toolA", description: "Tool A", handler: vi.fn() },
+      ];
+      const tools2: VueFrontendTool[] = [
+        { name: "toolB", description: "Tool B", handler: vi.fn() },
+      ];
+
+      const view = renderProvider({
+        child: Collector,
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: tools1,
+      });
+
+      await nextTick();
+      await view.rerender({
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: tools2,
+      });
+      await nextTick();
+
+      expect(instances.length).toBeGreaterThanOrEqual(2);
+      const first = instances[0];
+      for (const instance of instances) {
+        expect(instance).toBe(first);
+      }
+    });
+  });
+
+  describe("context value stability", () => {
+    it("does not change context value reference when only tools change", async () => {
+      const contextValues: CopilotKitContextValue[] = [];
+
+      const Collector = defineComponent({
+        setup() {
+          const context = useCopilotKit();
+          watchEffect(() => {
+            void context.copilotkit.value;
+            void context.executingToolCallIds.value;
+            contextValues.push(context);
+          });
+          return () => null;
+        },
+      });
+
+      const tools1: VueFrontendTool[] = [
+        { name: "toolA", description: "Tool A" },
+      ];
+      const tools2: VueFrontendTool[] = [
+        { name: "toolB", description: "Tool B" },
+      ];
+
+      const view = renderProvider({
+        child: Collector,
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: tools1,
+      });
+
+      await nextTick();
+      const initialContext = contextValues[contextValues.length - 1];
+
+      await view.rerender({
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: tools2,
+      });
+      await nextTick();
+
+      const afterRerender = contextValues[contextValues.length - 1];
+      expect(afterRerender?.copilotkit).toBe(initialContext?.copilotkit);
+      expect(afterRerender?.executingToolCallIds).toBe(
+        initialContext?.executingToolCallIds,
+      );
+    });
+  });
+
+  describe("setter calls on prop changes", () => {
+    it("calls setTools when frontendTools change instead of recreating instance", async () => {
+      const setToolsSpy = vi.fn();
+      let spyAttached = false;
+
+      const SpyAttacher = defineComponent({
+        setup() {
+          const { copilotkit } = useCopilotKit();
+          if (!spyAttached) {
+            const originalSetTools = copilotkit.value.setTools.bind(
+              copilotkit.value,
+            );
+            copilotkit.value.setTools = (tools) => {
+              setToolsSpy(tools);
+              return originalSetTools(tools);
+            };
+            spyAttached = true;
+          }
+          return () => null;
+        },
+      });
+
+      const tools1: VueFrontendTool[] = [
+        { name: "toolA", description: "Tool A", handler: vi.fn() },
+      ];
+      const tools2: VueFrontendTool[] = [
+        { name: "toolB", description: "Tool B", handler: vi.fn() },
+      ];
+
+      const view = renderProvider({
+        child: SpyAttacher,
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: tools1,
+      });
+
+      await nextTick();
+      setToolsSpy.mockClear();
+
+      await view.rerender({
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: tools2,
+      });
+      await nextTick();
+
+      expect(setToolsSpy).toHaveBeenCalled();
+    });
+
+    it("calls setRenderToolCalls when renderToolCalls change", async () => {
+      const setRenderToolCallsSpy = vi.fn();
+      let spyAttached = false;
+
+      const SpyAttacher = defineComponent({
+        setup() {
+          const { copilotkit } = useCopilotKit();
+          if (!spyAttached) {
+            const original = copilotkit.value.setRenderToolCalls.bind(
+              copilotkit.value,
+            );
+            copilotkit.value.setRenderToolCalls = (renderToolCalls) => {
+              setRenderToolCallsSpy(renderToolCalls);
+              return original(renderToolCalls);
+            };
+            spyAttached = true;
+          }
+          return () => null;
+        },
+      });
+
+      const Renderer1 = defineComponent({ template: "<div>R1</div>" });
+      const Renderer2 = defineComponent({ template: "<div>R2</div>" });
+
+      const rtc1: VueFrontendTool[] = [
+        {
+          name: "render1",
+          description: "Render 1",
+          parameters: z.object({ x: z.string() }),
+          render: Renderer1,
+        },
+      ];
+      const rtc2: VueFrontendTool[] = [
+        {
+          name: "render2",
+          description: "Render 2",
+          parameters: z.object({ y: z.string() }),
+          render: Renderer2,
+        },
+      ];
+
+      const view = renderProvider({
+        child: SpyAttacher,
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: rtc1,
+      });
+
+      await nextTick();
+      setRenderToolCallsSpy.mockClear();
+
+      await view.rerender({
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: rtc2,
+      });
+      await nextTick();
+
+      expect(setRenderToolCallsSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe("no unnecessary re-renders from stable props", () => {
+    it("does not re-render children when provider re-renders with same stable props", async () => {
+      let childRenderCount = 0;
+
+      const Child = defineComponent({
+        setup() {
+          childRenderCount++;
+          useCopilotKit();
+          return () => "child";
+        },
+      });
+
+      const stableTools: VueFrontendTool[] = [
+        { name: "tool1", description: "Tool 1" },
+      ];
+
+      const view = renderProvider({
+        child: Child,
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: stableTools,
+      });
+
+      await nextTick();
+      const initialCount = childRenderCount;
+
+      await view.rerender({
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: stableTools,
+      });
+      await nextTick();
+
+      expect(childRenderCount - initialCount).toBeLessThanOrEqual(1);
+    });
+  });
+
+  describe("setter effects skip initial mount (didMountRef guard)", () => {
+    it("does not call setTools on initial mount (constructor handles it)", async () => {
+      const tools: VueFrontendTool[] = [
+        { name: "tool1", description: "Tool 1" },
+      ];
+      const setToolsCalls: unknown[][] = [];
+      let spyAttached = false;
+
+      const SpyAttacher = defineComponent({
+        setup() {
+          const { copilotkit } = useCopilotKit();
+          if (!spyAttached) {
+            const originalSetTools = copilotkit.value.setTools.bind(
+              copilotkit.value,
+            );
+            copilotkit.value.setTools = (nextTools) => {
+              setToolsCalls.push([nextTools]);
+              return originalSetTools(nextTools);
+            };
+            spyAttached = true;
+          }
+          return () => null;
+        },
+      });
+
+      renderProvider({
+        child: SpyAttacher,
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: tools,
+      });
+
+      await nextTick();
+      expect(setToolsCalls).toHaveLength(0);
+    });
+
+    it("does not call setRenderToolCalls on initial mount", async () => {
+      const calls: unknown[][] = [];
+      let spyAttached = false;
+
+      const SpyAttacher = defineComponent({
+        setup() {
+          const { copilotkit } = useCopilotKit();
+          if (!spyAttached) {
+            const original = copilotkit.value.setRenderToolCalls.bind(
+              copilotkit.value,
+            );
+            copilotkit.value.setRenderToolCalls = (renderToolCalls) => {
+              calls.push([renderToolCalls]);
+              return original(renderToolCalls);
+            };
+            spyAttached = true;
+          }
+          return () => null;
+        },
+      });
+
+      const Renderer = defineComponent({ template: "<div>R1</div>" });
+
+      const rtc: VueFrontendTool[] = [
+        {
+          name: "render1",
+          description: "Render 1",
+          parameters: z.object({ x: z.string() }),
+          render: Renderer,
+        },
+      ];
+
+      renderProvider({
+        child: SpyAttacher,
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: rtc,
+      });
+
+      await nextTick();
+      expect(calls).toHaveLength(0);
+    });
+  });
+
+  describe("dynamic tool preservation on mount", () => {
+    it("preserves dynamically registered tools from child hooks after provider mounts", async () => {
+      let core: CopilotKitCoreVue | null = null;
+
+      const DynamicToolChild = defineComponent({
+        setup() {
+          const { copilotkit } = useCopilotKit();
+          core = copilotkit.value;
+          useFrontendTool({
+            name: "dynamicTool",
+            description: "A dynamically registered tool",
+            handler: async () => "result",
+          });
+          return () => null;
+        },
+      });
+
+      const providerTools: VueFrontendTool[] = [
+        {
+          name: "providerTool",
+          description: "From provider props",
+          handler: vi.fn(),
+        },
+      ];
+
+      renderProvider({
+        child: DynamicToolChild,
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: providerTools,
+      });
+
+      await nextTick();
+      expect(core).toBeTruthy();
+      expect(core?.getTool({ toolName: "dynamicTool" })).toBeDefined();
+      expect(core?.getTool({ toolName: "providerTool" })).toBeDefined();
+    });
+
+    it("preserves dynamically registered render tool calls from child hooks after provider mounts", async () => {
+      let core: CopilotKitCoreVue | null = null;
+
+      const DynamicRenderChild = defineComponent({
+        setup() {
+          const { copilotkit } = useCopilotKit();
+          core = copilotkit.value;
+          useFrontendTool({
+            name: "renderableTool",
+            description: "Has a render function",
+            parameters: z.object({ msg: z.string() }),
+            handler: async () => "ok",
+            render: defineComponent({ template: "<div>Rendered!</div>" }),
+          });
+          return () => null;
+        },
+      });
+
+      const providerRtc: VueFrontendTool[] = [
+        {
+          name: "providerRenderer",
+          description: "Provider render",
+          parameters: z.object({ x: z.string() }),
+          render: defineComponent({ template: "<div>Provider Render</div>" }),
+        },
+      ];
+
+      renderProvider({
+        child: DynamicRenderChild,
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: providerRtc,
+      });
+
+      await nextTick();
+      expect(core).toBeTruthy();
+      const renderToolCalls = core?.renderToolCalls ?? [];
+      expect(
+        renderToolCalls.find((t) => t.name === "providerRenderer"),
+      ).toBeDefined();
+      expect(
+        renderToolCalls.find((t) => t.name === "renderableTool"),
+      ).toBeDefined();
+    });
+  });
+
+  describe("Vue remount lifecycle", () => {
+    it("creates a fresh copilotkit instance on remount", async () => {
+      const instances: CopilotKitCoreVue[] = [];
+
+      const Collector = defineComponent({
+        setup() {
+          const { copilotkit } = useCopilotKit();
+          instances.push(copilotkit.value);
+          return () => null;
+        },
+      });
+
+      const view1 = renderProvider({
+        child: Collector,
+        runtimeUrl: "/api/copilotkit",
+      });
+      await nextTick();
+      view1.unmount();
+
+      const view2 = renderProvider({
+        child: Collector,
+        runtimeUrl: "/api/copilotkit",
+      });
+      await nextTick();
+      view2.unmount();
+
+      expect(instances).toHaveLength(2);
+      expect(instances[1]).not.toBe(instances[0]);
+    });
+
+    it("creates fresh context references on remount", async () => {
+      const contextValues: CopilotKitContextValue[] = [];
+
+      const Collector = defineComponent({
+        setup() {
+          contextValues.push(useCopilotKit());
+          return () => null;
+        },
+      });
+
+      const view1 = renderProvider({
+        child: Collector,
+        runtimeUrl: "/api/copilotkit",
+      });
+      await nextTick();
+      view1.unmount();
+
+      const view2 = renderProvider({
+        child: Collector,
+        runtimeUrl: "/api/copilotkit",
+      });
+      await nextTick();
+      view2.unmount();
+
+      expect(contextValues).toHaveLength(2);
+      expect(contextValues[1]?.copilotkit).not.toBe(
+        contextValues[0]?.copilotkit,
+      );
+      expect(contextValues[1]?.executingToolCallIds).not.toBe(
+        contextValues[0]?.executingToolCallIds,
+      );
+    });
+
+    it("preserves dynamically registered tools after remount", async () => {
+      const capturedInstances: CopilotKitCoreVue[] = [];
+
+      const DynamicToolChild = defineComponent({
+        setup() {
+          const { copilotkit } = useCopilotKit();
+          capturedInstances.push(copilotkit.value);
+
+          useFrontendTool({
+            name: "remountTool",
+            description: "Registered after remount",
+            handler: async () => "ok",
+          });
+
+          return () => null;
+        },
+      });
+
+      const view1 = renderProvider({
+        child: DynamicToolChild,
+        runtimeUrl: "/api/copilotkit",
+      });
+      await nextTick();
+      expect(
+        capturedInstances[0]?.getTool({ toolName: "remountTool" }),
+      ).toBeDefined();
+      view1.unmount();
+
+      const view2 = renderProvider({
+        child: DynamicToolChild,
+        runtimeUrl: "/api/copilotkit",
+      });
+      await nextTick();
+      expect(
+        capturedInstances[1]?.getTool({ toolName: "remountTool" }),
+      ).toBeDefined();
+      expect(capturedInstances[1]).not.toBe(capturedInstances[0]);
+      view2.unmount();
+    });
+
+    it("preserves dynamically registered render tool calls after remount", async () => {
+      const capturedInstances: CopilotKitCoreVue[] = [];
+
+      const DynamicRenderChild = defineComponent({
+        setup() {
+          const { copilotkit } = useCopilotKit();
+          capturedInstances.push(copilotkit.value);
+
+          useFrontendTool({
+            name: "remountRenderTool",
+            description: "Render survives remount",
+            parameters: z.object({ topic: z.string() }),
+            handler: async () => "ok",
+            render: defineComponent({ template: "<div>Rendered!</div>" }),
+          });
+
+          return () => null;
+        },
+      });
+
+      const view1 = renderProvider({
+        child: DynamicRenderChild,
+        runtimeUrl: "/api/copilotkit",
+      });
+      await nextTick();
+      expect(
+        capturedInstances[0]?.renderToolCalls.find(
+          (r) => r.name === "remountRenderTool",
+        ),
+      ).toBeDefined();
+      view1.unmount();
+
+      const view2 = renderProvider({
+        child: DynamicRenderChild,
+        runtimeUrl: "/api/copilotkit",
+      });
+      await nextTick();
+      expect(
+        capturedInstances[1]?.renderToolCalls.find(
+          (r) => r.name === "remountRenderTool",
+        ),
+      ).toBeDefined();
+      expect(capturedInstances[1]).not.toBe(capturedInstances[0]);
+      view2.unmount();
+    });
+
+    it("hook render entries coexist with prop render entries after remount", async () => {
+      const capturedInstances: CopilotKitCoreVue[] = [];
+
+      const DynamicRenderChild = defineComponent({
+        setup() {
+          const { copilotkit } = useCopilotKit();
+          capturedInstances.push(copilotkit.value);
+
+          useFrontendTool({
+            name: "hookTool",
+            description: "Registered via hook",
+            parameters: z.object({ x: z.string() }),
+            handler: async () => "ok",
+            render: defineComponent({ template: "<div>Hook render</div>" }),
+          });
+
+          return () => null;
+        },
+      });
+
+      const propRtc: VueFrontendTool[] = [
+        {
+          name: "propTool",
+          description: "Prop tool",
+          parameters: z.object({ y: z.string() }),
+          render: defineComponent({ template: "<div>Prop render</div>" }),
+        },
+      ];
+
+      const view1 = renderProvider({
+        child: DynamicRenderChild,
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: propRtc,
+      });
+      await nextTick();
+      expect(
+        capturedInstances[0]?.renderToolCalls.find(
+          (r) => r.name === "propTool",
+        ),
+      ).toBeDefined();
+      expect(
+        capturedInstances[0]?.renderToolCalls.find(
+          (r) => r.name === "hookTool",
+        ),
+      ).toBeDefined();
+      view1.unmount();
+
+      const view2 = renderProvider({
+        child: DynamicRenderChild,
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: propRtc,
+      });
+      await nextTick();
+      expect(
+        capturedInstances[1]?.renderToolCalls.find(
+          (r) => r.name === "propTool",
+        ),
+      ).toBeDefined();
+      expect(
+        capturedInstances[1]?.renderToolCalls.find(
+          (r) => r.name === "hookTool",
+        ),
+      ).toBeDefined();
+      expect(capturedInstances[1]).not.toBe(capturedInstances[0]);
+      view2.unmount();
+    });
+
+    it("does not leak executing state from prior mount", async () => {
+      let firstMountSize = -1;
+      let secondMountSize = -1;
+
+      const FirstMountChild = defineComponent({
+        setup() {
+          const context = useCopilotKit();
+          context.executingToolCallIds.value = new Set(["leaked-tool-call-id"]);
+          firstMountSize = context.executingToolCallIds.value.size;
+          return () => null;
+        },
+      });
+
+      const SecondMountChild = defineComponent({
+        setup() {
+          const context = useCopilotKit();
+          secondMountSize = context.executingToolCallIds.value.size;
+          return () => null;
+        },
+      });
+
+      const view1 = renderProvider({
+        child: FirstMountChild,
+        runtimeUrl: "/api/copilotkit",
+      });
+      await nextTick();
+      view1.unmount();
+
+      const view2 = renderProvider({
+        child: SecondMountChild,
+        runtimeUrl: "/api/copilotkit",
+      });
+      await nextTick();
+      view2.unmount();
+
+      expect(firstMountSize).toBe(1);
+      expect(secondMountSize).toBe(0);
+    });
+  });
+
+  describe("hook render entries survive prop changes", () => {
+    it("preserves hook-registered render entries when provider renderToolCalls prop changes", async () => {
+      let capturedInstance: CopilotKitCoreVue | null = null;
+      const currentRenderToolCalls = ref<VueFrontendTool[]>([]);
+
+      const DynamicRenderChild = defineComponent({
+        setup() {
+          const { copilotkit } = useCopilotKit();
+          capturedInstance = copilotkit.value;
+
+          useFrontendTool(
+            {
+              name: "hookTool",
+              description: "Registered via hook",
+              parameters: z.object({ x: z.string() }),
+              handler: async () => "ok",
+              render: defineComponent({ template: "<div>Hook render</div>" }),
+            },
+            [currentRenderToolCalls],
+          );
+
+          return () => null;
+        },
+      });
+
+      const rtc1: VueFrontendTool[] = [
+        {
+          name: "propToolA",
+          description: "A",
+          parameters: z.object({ a: z.string() }),
+          render: defineComponent({ template: "<div>A</div>" }),
+        },
+      ];
+      const rtc2: VueFrontendTool[] = [
+        {
+          name: "propToolB",
+          description: "B",
+          parameters: z.object({ b: z.string() }),
+          render: defineComponent({ template: "<div>B</div>" }),
+        },
+      ];
+
+      const view = renderProvider({
+        child: DynamicRenderChild,
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: rtc1,
+      });
+
+      currentRenderToolCalls.value = rtc2;
+      await view.rerender({
+        runtimeUrl: "/api/copilotkit",
+        frontendTools: rtc2,
+      });
+      await nextTick();
+
+      expect(capturedInstance).not.toBeNull();
+      const renderToolCalls = capturedInstance!.renderToolCalls;
+      expect(
+        renderToolCalls.find((r) => r.name === "propToolA"),
+      ).toBeUndefined();
+      expect(renderToolCalls.find((r) => r.name === "propToolB")).toBeDefined();
+      expect(renderToolCalls.find((r) => r.name === "hookTool")).toBeDefined();
+    });
+  });
+
+  describe("runtimeUrl deduplication", () => {
+    it("always calls setRuntimeUrl with the same URL on re-render (AgentRegistry deduplicates)", async () => {
+      const setRuntimeUrlCalls: unknown[] = [];
+      let spyAttached = false;
+
+      const SpyAttacher = defineComponent({
+        setup() {
+          const { copilotkit } = useCopilotKit();
+          if (!spyAttached) {
+            const original = copilotkit.value.setRuntimeUrl.bind(
+              copilotkit.value,
+            );
+            copilotkit.value.setRuntimeUrl = (
+              ...args: [string | undefined]
+            ) => {
+              setRuntimeUrlCalls.push(args[0]);
+              return original(...args);
+            };
+            spyAttached = true;
+          }
+          return () => null;
+        },
+      });
+
+      const view = renderProvider({
+        child: SpyAttacher,
+        runtimeUrl: "http://localhost:3000/api",
+      });
+
+      await view.rerender({ runtimeUrl: "http://localhost:3000/api" });
+      await nextTick();
+
+      expect(setRuntimeUrlCalls.length).toBeGreaterThanOrEqual(1);
+      for (const url of setRuntimeUrlCalls) {
+        expect(url).toBe("http://localhost:3000/api");
+      }
+    });
+  });
+});