@assistant-ui/tap 0.6.1 → 0.7.1

package/src/__tests__/strictmode/react-strictmode-rerender-sources.test.tsx

@@ -1,488 +0,0 @@
-/**
- * Tests to verify when React strict mode causes double-rendering
- * for different sources of setState calls
- */
-
-import { describe, it, expect, vi, afterEach } from "vitest";
-import { render, fireEvent, waitFor } from "@testing-library/react";
-import { StrictMode, useState, useEffect, useLayoutEffect } from "react";
-
-describe("React Strict Mode - Rerender Sources", () => {
-  describe("Source 1: Initial render", () => {
-    it("should double-render on initial mount", () => {
-      const events: string[] = [];
-
-      function TestComponent() {
-        const [count] = useState(0);
-        events.push(`render count=${count}`);
-        return <div>{count}</div>;
-      }
-
-      render(
-        <StrictMode>
-          <TestComponent />
-        </StrictMode>,
-      );
-
-      expect(events).toEqual(["render count=0", "render count=0"]);
-    });
-  });
-
-  describe("Source 2: setState in render", () => {
-    it("should handle setState during render", () => {
-      const events: string[] = [];
-
-      function TestComponent() {
-        const [count, setCount] = useState(0);
-        events.push(`render count=${count}`);
-
-        // setState during render (this pattern sets state once during initial render)
-        if (count === 0) {
-          setCount(1);
-        }
-
-        return <div>{count}</div>;
-      }
-
-      render(
-        <StrictMode>
-          <TestComponent />
-        </StrictMode>,
-      );
-
-      // ACTUAL: setState during render only renders once with old value,
-      // then double-renders with new value
-      expect(events).toEqual([
-        "render count=0",
-        "render count=1",
-        "render count=1",
-      ]);
-    });
-  });
-
-  describe("Source 3: setState in useEffect", () => {
-    it("should double-render after setState in useEffect", () => {
-      const events: string[] = [];
-
-      function TestComponent() {
-        const [count, setCount] = useState(0);
-        events.push(`render count=${count}`);
-
-        useEffect(() => {
-          events.push(`effect count=${count}`);
-          if (count === 0) {
-            setCount(1);
-          }
-          return () => {
-            events.push(`cleanup count=${count}`);
-          };
-        }, [count]);
-
-        return <div>{count}</div>;
-      }
-
-      render(
-        <StrictMode>
-          <TestComponent />
-        </StrictMode>,
-      );
-
-      expect(events).toEqual([
-        "render count=0",
-        "render count=0",
-        "effect count=0",
-        "cleanup count=0",
-        "effect count=0",
-        "render count=1",
-        "render count=1",
-        "cleanup count=0",
-        "effect count=1",
-      ]);
-    });
-  });
-
-  describe("Source 4: setState in event handler", () => {
-    it("should ALSO double-render after setState in event handler (React 19)", () => {
-      const events: string[] = [];
-
-      function TestComponent() {
-        const [count, setCount] = useState(0);
-        events.push(`render count=${count}`);
-
-        return (
-          <button
-            type="button"
-            onClick={() => {
-              events.push("click");
-              setCount(count + 1);
-            }}
-          >
-            {count}
-          </button>
-        );
-      }
-
-      const { getByRole } = render(
-        <StrictMode>
-          <TestComponent />
-        </StrictMode>,
-      );
-
-      // Initial render is double
-      expect(events).toEqual(["render count=0", "render count=0"]);
-
-      events.length = 0; // Clear events
-
-      // Click the button
-      fireEvent.click(getByRole("button"));
-
-      // ACTUAL: In React 19 strict mode, ALL renders are doubled!
-      // Even renders triggered by event handlers!
-      expect(events).toEqual(["click", "render count=1", "render count=1"]);
-    });
-
-    it("should double-render on ALL event handler clicks (React 19)", () => {
-      const events: string[] = [];
-
-      function TestComponent() {
-        const [count, setCount] = useState(0);
-        events.push(`render count=${count}`);
-
-        return (
-          <button
-            type="button"
-            onClick={() => {
-              events.push("click");
-              setCount((c) => c + 1);
-            }}
-          >
-            {count}
-          </button>
-        );
-      }
-
-      const { getByRole } = render(
-        <StrictMode>
-          <TestComponent />
-        </StrictMode>,
-      );
-
-      events.length = 0; // Clear initial renders
-
-      // Multiple clicks
-      fireEvent.click(getByRole("button"));
-      fireEvent.click(getByRole("button"));
-      fireEvent.click(getByRole("button"));
-
-      // ACTUAL: Each click causes DOUBLE render in React 19 strict mode
-      expect(events).toEqual([
-        "click",
-        "render count=1",
-        "render count=1",
-        "click",
-        "render count=2",
-        "render count=2",
-        "click",
-        "render count=3",
-        "render count=3",
-      ]);
-    });
-  });
-
-  describe("Source 5: setState in setTimeout", () => {
-    afterEach(() => {
-      vi.useRealTimers();
-    });
-
-    it("should double-render AND double-call setTimeout callback (React 19)", async () => {
-      // Use fake timers so both strict-mode setTimeout callbacks fire
-      // synchronously before React gets a chance to flush a re-render
-      // between them. Without this, slow CI can process the first
-      // setTimeout, run its renders, and only then fire the second.
-      vi.useFakeTimers();
-
-      const events: string[] = [];
-
-      function TestComponent() {
-        const [count, setCount] = useState(0);
-        events.push(`render count=${count}`);
-
-        useEffect(() => {
-          if (count === 0) {
-            setTimeout(() => {
-              events.push("setTimeout");
-              setCount(1);
-            }, 10);
-          }
-        }, [count]);
-
-        return <div>{count}</div>;
-      }
-
-      render(
-        <StrictMode>
-          <TestComponent />
-        </StrictMode>,
-      );
-
-      // Fire both setTimeout callbacks synchronously via fake timers
-      vi.advanceTimersByTime(10);
-      // Restore real timers and wait for React's scheduler (MessageChannel) to flush
-      vi.useRealTimers();
-      await waitFor(() => {
-        expect(events).toHaveLength(6);
-      });
-
-      // ACTUAL: setTimeout callback runs TWICE and renders are DOUBLED
-      expect(events).toEqual([
-        "render count=0",
-        "render count=0",
-        "setTimeout",
-        "setTimeout",
-        "render count=1",
-        "render count=1",
-      ]);
-    });
-  });
-
-  describe("Source 6: setState in Promise/async", () => {
-    it("should double-render AND double-call Promise callback (React 19)", async () => {
-      const events: string[] = [];
-
-      function TestComponent() {
-        const [count, setCount] = useState(0);
-        events.push(`render count=${count}`);
-
-        useEffect(() => {
-          if (count === 0) {
-            Promise.resolve().then(() => {
-              events.push("promise");
-              setCount(1);
-            });
-          }
-        }, [count]);
-
-        return <div>{count}</div>;
-      }
-
-      render(
-        <StrictMode>
-          <TestComponent />
-        </StrictMode>,
-      );
-
-      // Wait for promise
-      await waitFor(() => {
-        expect(events).toContain("promise");
-      });
-
-      // ACTUAL: Promise callback runs TWICE and renders are DOUBLED
-      expect(events).toEqual([
-        "render count=0",
-        "render count=0",
-        "promise",
-        "promise",
-        "render count=1",
-        "render count=1",
-      ]);
-    });
-  });
-
-  describe("Source 7: Multiple setState calls", () => {
-    it("should batch multiple setState calls in event handlers (single render)", () => {
-      const events: string[] = [];
-
-      function TestComponent() {
-        const [count1, setCount1] = useState(0);
-        const [count2, setCount2] = useState(0);
-        events.push(`render count1=${count1} count2=${count2}`);
-
-        return (
-          <button
-            type="button"
-            onClick={() => {
-              events.push("click");
-              setCount1(1);
-              setCount2(2);
-            }}
-          >
-            Click
-          </button>
-        );
-      }
-
-      const { getByRole } = render(
-        <StrictMode>
-          <TestComponent />
-        </StrictMode>,
-      );
-
-      events.length = 0; // Clear initial renders
-
-      fireEvent.click(getByRole("button"));
-
-      // ACTUAL: Both setState calls batched, but render is DOUBLED
-      expect(events).toEqual([
-        "click",
-        "render count1=1 count2=2",
-        "render count1=1 count2=2",
-      ]);
-    });
-
-    it("should batch multiple setState calls in useEffect (single double-render)", () => {
-      const events: string[] = [];
-
-      function TestComponent() {
-        const [count1, setCount1] = useState(0);
-        const [count2, setCount2] = useState(0);
-        events.push(`render count1=${count1} count2=${count2}`);
-
-        useEffect(() => {
-          if (count1 === 0 && count2 === 0) {
-            setCount1(1);
-            setCount2(2);
-          }
-        }, [count1, count2]);
-
-        return <div>Test</div>;
-      }
-
-      render(
-        <StrictMode>
-          <TestComponent />
-        </StrictMode>,
-      );
-
-      // Initial double-render, then batched setState causes another double-render
-      expect(events).toEqual([
-        "render count1=0 count2=0",
-        "render count1=0 count2=0",
-        "render count1=1 count2=2",
-        "render count1=1 count2=2",
-      ]);
-    });
-  });
-
-  describe("Source 8: setState in useLayoutEffect", () => {
-    it("should double-render after setState in useLayoutEffect", () => {
-      const events: string[] = [];
-
-      function TestComponent() {
-        const [count, setCount] = useState(0);
-        events.push(`render count=${count}`);
-
-        useLayoutEffect(() => {
-          events.push(`layoutEffect count=${count}`);
-          if (count === 0) {
-            setCount(1);
-          }
-          return () => {
-            events.push(`layoutCleanup count=${count}`);
-          };
-        }, [count]);
-
-        return <div>{count}</div>;
-      }
-
-      render(
-        <StrictMode>
-          <TestComponent />
-        </StrictMode>,
-      );
-
-      // useLayoutEffect runs synchronously after render, before paint
-      expect(events).toEqual([
-        "render count=0",
-        "render count=0",
-        "layoutEffect count=0",
-        "layoutCleanup count=0",
-        "layoutEffect count=0",
-        "render count=1",
-        "render count=1",
-        "layoutCleanup count=0",
-        "layoutEffect count=1",
-      ]);
-    });
-  });
-
-  describe("Source 9: Effect with dependencies calling setState (derived state)", () => {
-    it("should handle effect with dependencies and setState", () => {
-      const events: string[] = [];
-
-      function TestComponent() {
-        const [count] = useState(0);
-        const [doubled, setDoubled] = useState(0);
-        events.push(`render count=${count} doubled=${doubled}`);
-
-        useEffect(() => {
-          events.push(`effect count=${count}`);
-          setDoubled(count * 2);
-          return () => {
-            events.push(`cleanup count=${count}`);
-          };
-        }, [count]);
-
-        return <div>{doubled}</div>;
-      }
-
-      render(
-        <StrictMode>
-          <TestComponent />
-        </StrictMode>,
-      );
-
-      // setDoubled(0*2) = setDoubled(0) is a no-op, so no extra render
-      expect(events).toEqual([
-        "render count=0 doubled=0",
-        "render count=0 doubled=0",
-        "effect count=0",
-        "cleanup count=0",
-        "effect count=0",
-      ]);
-    });
-
-    it("should handle effect with dependencies and setState after state change", () => {
-      const events: string[] = [];
-
-      function TestComponent() {
-        const [count, setCount] = useState(0);
-        const [doubled, setDoubled] = useState(0);
-        events.push(`render count=${count} doubled=${doubled}`);
-
-        useEffect(() => {
-          events.push(`effect count=${count}`);
-          setDoubled(count * 2);
-          return () => {
-            events.push(`cleanup count=${count}`);
-          };
-        }, [count]);
-
-        return (
-          <button type="button" onClick={() => setCount((c) => c + 1)}>
-            Click
-          </button>
-        );
-      }
-
-      const { getByRole } = render(
-        <StrictMode>
-          <TestComponent />
-        </StrictMode>,
-      );
-
-      events.length = 0;
-
-      fireEvent.click(getByRole("button"));
-
-      // Double-render with new count, effect sets doubled=2, triggers another double-render
-      expect(events).toEqual([
-        "render count=1 doubled=0",
-        "render count=1 doubled=0",
-        "cleanup count=0",
-        "effect count=1",
-        "render count=1 doubled=2",
-        "render count=1 doubled=2",
-      ]);
-    });
-  });
-});