@pyreon/preact-compat 0.2.1 → 0.3.0

package/src/tests/preact-compat.test.ts

@@ -1,8 +1,9 @@
 import type { VNodeChild } from "@pyreon/core"
 import { h as pyreonH } from "@pyreon/core"
-import { signal as pyreonSignal } from "@pyreon/reactivity"
+import { effect, signal as pyreonSignal } from "@pyreon/reactivity"
 import { mount } from "@pyreon/runtime-dom"
 import {
+  memo,
   useCallback,
   useEffect,
   useErrorBoundary,
@@ -28,7 +29,9 @@ import {
   toChildArray,
   useContext,
 } from "../index"
-import { batch, computed, effect, signal } from "../signals"
+import type { RenderContext } from "../jsx-runtime"
+import { beginRender, endRender, jsx } from "../jsx-runtime"
+import { batch, computed, signal, effect as signalEffect } from "../signals"
 
 function container(): HTMLElement {
   const el = document.createElement("div")
@@ -36,6 +39,41 @@ function container(): HTMLElement {
   return el
 }
 
+/** Helper: creates a RenderContext for testing hooks outside of full render cycle */
+function withHookCtx<T>(fn: () => T): T {
+  const ctx: RenderContext = {
+    hooks: [],
+    scheduleRerender: () => {},
+    pendingEffects: [],
+    pendingLayoutEffects: [],
+    unmounted: false,
+  }
+  beginRender(ctx)
+  const result = fn()
+  endRender()
+  return result
+}
+
+/** Re-render helper: calls fn with the same ctx to simulate re-render */
+function createHookRunner() {
+  const ctx: RenderContext = {
+    hooks: [],
+    scheduleRerender: () => {},
+    pendingEffects: [],
+    pendingLayoutEffects: [],
+    unmounted: false,
+  }
+  return {
+    ctx,
+    run<T>(fn: () => T): T {
+      beginRender(ctx)
+      const result = fn()
+      endRender()
+      return result
+    },
+  }
+}
+
 describe("@pyreon/preact-compat", () => {
   // ─── Core API ────────────────────────────────────────────────────────────
 
@@ -63,7 +101,6 @@ describe("@pyreon/preact-compat", () => {
   test("hydrate() calls hydrateRoot", () => {
     const el = container()
     el.innerHTML = "<span>hydrated</span>"
-    // hydrate should not throw; it calls hydrateRoot internally
     hydrate(h("span", null, "hydrated"), el)
     expect(el.innerHTML).toContain("hydrated")
   })
@@ -148,7 +185,6 @@ describe("@pyreon/preact-compat", () => {
 
   test("createContext/useContext work", () => {
     const Ctx = createContext("default")
-    // Without a provider, useContext returns the default value
     expect(useContext(Ctx)).toBe("default")
   })
 
@@ -202,203 +238,434 @@ describe("@pyreon/preact-compat", () => {
       }
     }
     const c = new MyComp({})
-    // forceUpdate should not throw and should update internal signal
     c.forceUpdate()
     expect(c.state.value).toBe(42)
   })
+})
 
-  // ─── Hooks ───────────────────────────────────────────────────────────────
+// ─── useState ─────────────────────────────────────────────────────────────────
 
-  test("useState returns [getter, setter]", () => {
-    const [count, setCount] = useState(0)
-    expect(count()).toBe(0)
+describe("useState", () => {
+  test("returns [value, setter] — value is the initial value", () => {
+    const [count] = withHookCtx(() => useState(0))
+    expect(count).toBe(0)
+  })
+
+  test("setter updates value on re-render", () => {
+    const runner = createHookRunner()
+    const [, setCount] = runner.run(() => useState(0))
     setCount(5)
-    expect(count()).toBe(5)
+    const [count2] = runner.run(() => useState(0))
+    expect(count2).toBe(5)
+  })
+
+  test("setter with function updater", () => {
+    const runner = createHookRunner()
+    const [, setCount] = runner.run(() => useState(10))
     setCount((prev) => prev + 1)
-    expect(count()).toBe(6)
+    const [count2] = runner.run(() => useState(10))
+    expect(count2).toBe(11)
   })
 
-  test("useState with initializer function", () => {
+  test("initializer function is called once", () => {
     let calls = 0
-    const [val] = useState(() => {
-      calls++
-      return 42
-    })
-    expect(val()).toBe(42)
+    const runner = createHookRunner()
+    runner.run(() =>
+      useState(() => {
+        calls++
+        return 42
+      }),
+    )
+    expect(calls).toBe(1)
+    runner.run(() =>
+      useState(() => {
+        calls++
+        return 42
+      }),
+    )
     expect(calls).toBe(1)
   })
 
-  test("useMemo caches computed values", () => {
-    const [val, setVal] = useState(3)
-    const doubled = useMemo(() => val() * 2)
-    expect(doubled()).toBe(6)
-    setVal(10)
-    expect(doubled()).toBe(20)
+  test("setter does nothing when value is the same (Object.is)", () => {
+    const runner = createHookRunner()
+    let rerenders = 0
+    runner.ctx.scheduleRerender = () => {
+      rerenders++
+    }
+    const [, setCount] = runner.run(() => useState(0))
+    setCount(0)
+    expect(rerenders).toBe(0)
+    setCount(1)
+    expect(rerenders).toBe(1)
   })
 
-  test("useCallback returns same function", () => {
-    const fn = () => 42
-    expect(useCallback(fn)).toBe(fn)
-  })
+  test("re-render in a component via compat JSX runtime", async () => {
+    const el = container()
+    let renderCount = 0
+    let triggerSet: (v: number | ((p: number) => number)) => void = () => {}
+
+    const Counter = () => {
+      const [count, setCount] = useState(0)
+      renderCount++
+      triggerSet = setCount
+      return pyreonH("span", null, String(count))
+    }
 
-  test("useCallback with deps returns same function", () => {
-    const fn = (x: unknown) => x
-    expect(useCallback(fn, [1, 2])).toBe(fn)
-  })
+    const vnode = jsx(Counter, {})
+    mount(vnode, el)
+    expect(el.textContent).toBe("0")
+    const initialRenders = renderCount
 
-  test("useRef returns { current } with initial value", () => {
-    const ref = useRef(42)
-    expect(ref.current).toBe(42)
+    triggerSet(1)
+    await new Promise<void>((r) => queueMicrotask(r))
+    await new Promise<void>((r) => queueMicrotask(r))
+    expect(el.textContent).toBe("1")
+    expect(renderCount).toBe(initialRenders + 1)
   })
+})
 
-  test("useRef returns { current: null } without initial", () => {
-    const emptyRef = useRef()
-    expect(emptyRef.current).toBe(null)
-  })
+// ─── useReducer ───────────────────────────────────────────────────────────────
 
-  test("useReducer dispatches actions", () => {
+describe("useReducer", () => {
+  test("dispatch applies reducer", () => {
+    const runner = createHookRunner()
     type Action = { type: "inc" } | { type: "dec" }
-    const reducer = (s: number, a: Action) => (a.type === "inc" ? s + 1 : s - 1)
-    const [state, dispatch] = useReducer(reducer, 0)
-    expect(state()).toBe(0)
+    const reducer = (state: number, action: Action) =>
+      action.type === "inc" ? state + 1 : state - 1
+
+    const [state0, dispatch] = runner.run(() => useReducer(reducer, 0))
+    expect(state0).toBe(0)
+
     dispatch({ type: "inc" })
-    expect(state()).toBe(1)
+    const [state1] = runner.run(() => useReducer(reducer, 0))
+    expect(state1).toBe(1)
+
     dispatch({ type: "dec" })
-    expect(state()).toBe(0)
+    const [state2] = runner.run(() => useReducer(reducer, 0))
+    expect(state2).toBe(0)
   })
 
-  test("useReducer with initializer function", () => {
+  test("initializer function is called once", () => {
     let calls = 0
-    const [state] = useReducer(
-      (s: number) => s,
-      () => {
-        calls++
-        return 99
-      },
+    const runner = createHookRunner()
+    const [state] = runner.run(() =>
+      useReducer(
+        (s: number) => s,
+        () => {
+          calls++
+          return 99
+        },
+      ),
+    )
+    expect(state).toBe(99)
+    expect(calls).toBe(1)
+    runner.run(() =>
+      useReducer(
+        (s: number) => s,
+        () => {
+          calls++
+          return 99
+        },
+      ),
     )
-    expect(state()).toBe(99)
     expect(calls).toBe(1)
   })
 
-  test("useLayoutEffect is same as useEffect", () => {
-    expect(useLayoutEffect).toBe(useEffect)
+  test("dispatch does nothing when reducer returns same state", () => {
+    const runner = createHookRunner()
+    let rerenders = 0
+    runner.ctx.scheduleRerender = () => {
+      rerenders++
+    }
+    const [, dispatch] = runner.run(() => useReducer((_s: number, _a: string) => 5, 5))
+    dispatch("anything")
+    expect(rerenders).toBe(0)
   })
+})
 
-  test("useEffect with empty deps runs once on mount", () => {
+// ─── useEffect ────────────────────────────────────────────────────────────────
+
+describe("useEffect", () => {
+  test("effect runs after render via compat JSX runtime", async () => {
     const el = container()
-    const s = pyreonSignal(0)
-    let runs = 0
+    let effectRuns = 0
 
     const Comp = () => {
       useEffect(() => {
-        s()
-        runs++
-      }, [])
+        effectRuns++
+      })
       return pyreonH("div", null, "test")
     }
 
-    mount(pyreonH(Comp, null), el)
-    expect(runs).toBe(1)
-    s.set(1)
-    expect(runs).toBe(1) // should not re-run
+    mount(jsx(Comp, {}), el)
+    await new Promise<void>((r) => queueMicrotask(r))
+    expect(effectRuns).toBeGreaterThanOrEqual(1)
   })
 
-  test("useEffect with empty deps and cleanup", () => {
+  test("effect with empty deps runs once", async () => {
     const el = container()
-    let cleaned = false
+    let effectRuns = 0
+    let triggerSet: (v: number) => void = () => {}
 
     const Comp = () => {
+      const [count, setCount] = useState(0)
+      triggerSet = setCount
       useEffect(() => {
-        return () => {
-          cleaned = true
-        }
+        effectRuns++
       }, [])
-      return pyreonH("div", null, "cleanup-test")
+      return pyreonH("div", null, String(count))
     }
 
-    const unmount = mount(pyreonH(Comp, null), el)
-    expect(cleaned).toBe(false)
-    unmount()
-    // onUnmount called inside onMount callback is a no-op (hooks context
-    // is not active during mount-hook execution), so cleanup does not fire.
-    expect(cleaned).toBe(false)
+    mount(jsx(Comp, {}), el)
+    await new Promise<void>((r) => queueMicrotask(r))
+    expect(effectRuns).toBe(1)
+
+    triggerSet(1)
+    await new Promise<void>((r) => queueMicrotask(r))
+    await new Promise<void>((r) => queueMicrotask(r))
+    expect(effectRuns).toBe(1)
   })
 
-  test("useEffect without deps tracks reactively", () => {
+  test("effect with deps re-runs when deps change", async () => {
     const el = container()
-    const s = pyreonSignal(0)
-    let runs = 0
+    let effectRuns = 0
+    let triggerSet: (v: number | ((p: number) => number)) => void = () => {}
 
     const Comp = () => {
+      const [count, setCount] = useState(0)
+      triggerSet = setCount
       useEffect(() => {
-        s()
-        runs++
-      })
-      return pyreonH("div", null, "reactive")
+        effectRuns++
+      }, [count])
+      return pyreonH("div", null, String(count))
     }
 
-    const unmount = mount(pyreonH(Comp, null), el)
-    expect(runs).toBe(1)
-    s.set(1)
-    expect(runs).toBe(2)
-    unmount()
-    s.set(2)
-    expect(runs).toBe(2) // disposed
+    mount(jsx(Comp, {}), el)
+    await new Promise<void>((r) => queueMicrotask(r))
+    expect(effectRuns).toBe(1)
+
+    triggerSet((p) => p + 1)
+    await new Promise<void>((r) => queueMicrotask(r))
+    await new Promise<void>((r) => queueMicrotask(r))
+    await new Promise<void>((r) => queueMicrotask(r))
+    expect(effectRuns).toBe(2)
   })
 
-  test("useEffect with cleanup disposes on unmount", () => {
+  test("effect cleanup runs before re-execution", async () => {
     const el = container()
-    const s = pyreonSignal(0)
-    let cleaned = false
+    let cleanups = 0
+    let triggerSet: (v: number | ((p: number) => number)) => void = () => {}
 
     const Comp = () => {
+      const [count, setCount] = useState(0)
+      triggerSet = setCount
       useEffect(() => {
-        s()
         return () => {
-          cleaned = true
+          cleanups++
         }
-      })
-      return pyreonH("div", null, "cleanup")
+      }, [count])
+      return pyreonH("div", null, String(count))
     }
 
-    const unmount = mount(pyreonH(Comp, null), el)
-    expect(cleaned).toBe(false)
-    unmount()
-    // effect() now supports cleanup return values — cleanup fires on dispose
-    expect(cleaned).toBe(true)
+    mount(jsx(Comp, {}), el)
+    await new Promise<void>((r) => queueMicrotask(r))
+    expect(cleanups).toBe(0)
+
+    triggerSet((p) => p + 1)
+    await new Promise<void>((r) => queueMicrotask(r))
+    await new Promise<void>((r) => queueMicrotask(r))
+    await new Promise<void>((r) => queueMicrotask(r))
+    expect(cleanups).toBe(1)
+  })
+
+  test("pendingEffects populated during render", () => {
+    const runner = createHookRunner()
+    runner.run(() => {
+      useEffect(() => {})
+    })
+    expect(runner.ctx.pendingEffects).toHaveLength(1)
   })
 
-  test("useEffect without deps and non-function return", () => {
+  test("effect with same deps does not re-queue", () => {
+    const runner = createHookRunner()
+    runner.run(() => {
+      useEffect(() => {}, [1, 2])
+    })
+    expect(runner.ctx.pendingEffects).toHaveLength(1)
+
+    runner.run(() => {
+      useEffect(() => {}, [1, 2])
+    })
+    expect(runner.ctx.pendingEffects).toHaveLength(0)
+  })
+})
+
+// ─── useLayoutEffect ─────────────────────────────────────────────────────────
+
+describe("useLayoutEffect", () => {
+  test("layout effect runs synchronously during render in compat runtime", () => {
     const el = container()
-    const s = pyreonSignal(0)
-    let runs = 0
+    let effectRuns = 0
 
     const Comp = () => {
-      useEffect(() => {
-        s()
-        runs++
-        // no return
+      useLayoutEffect(() => {
+        effectRuns++
       })
-      return pyreonH("div", null, "no-return")
+      return pyreonH("div", null, "layout")
     }
 
-    const unmount = mount(pyreonH(Comp, null), el)
-    expect(runs).toBe(1)
-    s.set(1)
-    expect(runs).toBe(2)
-    unmount()
+    mount(jsx(Comp, {}), el)
+    expect(effectRuns).toBeGreaterThanOrEqual(1)
+  })
+
+  test("pendingLayoutEffects populated during render", () => {
+    const runner = createHookRunner()
+    runner.run(() => {
+      useLayoutEffect(() => {})
+    })
+    expect(runner.ctx.pendingLayoutEffects).toHaveLength(1)
+  })
+
+  test("layout effect with same deps does not re-queue", () => {
+    const runner = createHookRunner()
+    runner.run(() => {
+      useLayoutEffect(() => {}, [1])
+    })
+    expect(runner.ctx.pendingLayoutEffects).toHaveLength(1)
+
+    runner.run(() => {
+      useLayoutEffect(() => {}, [1])
+    })
+    expect(runner.ctx.pendingLayoutEffects).toHaveLength(0)
+  })
+})
+
+// ─── useMemo ──────────────────────────────────────────────────────────────────
+
+describe("useMemo", () => {
+  test("returns computed value", () => {
+    const value = withHookCtx(() => useMemo(() => 3 * 2, []))
+    expect(value).toBe(6)
+  })
+
+  test("recomputes when deps change", () => {
+    const runner = createHookRunner()
+    const v1 = runner.run(() => useMemo(() => 10, [1]))
+    expect(v1).toBe(10)
+
+    const v2 = runner.run(() => useMemo(() => 20, [1]))
+    expect(v2).toBe(10)
+
+    const v3 = runner.run(() => useMemo(() => 30, [2]))
+    expect(v3).toBe(30)
   })
+})
 
-  test("useId returns unique strings", () => {
-    const id1 = useId()
-    const id2 = useId()
-    expect(typeof id1).toBe("string")
-    expect(typeof id2).toBe("string")
-    expect(id1.startsWith(":r")).toBe(true)
-    expect(id2.startsWith(":r")).toBe(true)
+// ─── useCallback ──────────────────────────────────────────────────────────────
+
+describe("useCallback", () => {
+  test("returns the same function when deps unchanged", () => {
+    const runner = createHookRunner()
+    const fn1 = () => 42
+    const fn2 = () => 99
+    const result1 = runner.run(() => useCallback(fn1, [1]))
+    const result2 = runner.run(() => useCallback(fn2, [1]))
+    expect(result1).toBe(result2)
+    expect(result1()).toBe(42)
+  })
+
+  test("returns new function when deps change", () => {
+    const runner = createHookRunner()
+    const fn1 = () => 42
+    const fn2 = () => 99
+    const result1 = runner.run(() => useCallback(fn1, [1]))
+    const result2 = runner.run(() => useCallback(fn2, [2]))
+    expect(result2).toBe(fn2)
+    expect(result2()).toBe(99)
+    expect(result1).not.toBe(result2)
   })
+})
+
+// ─── useRef ───────────────────────────────────────────────────────────────────
 
-  test("useId within component scope returns deterministic IDs", () => {
+describe("useRef", () => {
+  test("returns { current } with null default", () => {
+    const ref = withHookCtx(() => useRef<HTMLDivElement>())
+    expect(ref.current).toBeNull()
+  })
+
+  test("returns { current } with initial value", () => {
+    const ref = withHookCtx(() => useRef(42))
+    expect(ref.current).toBe(42)
+  })
+
+  test("current is mutable", () => {
+    const ref = withHookCtx(() => useRef(0))
+    ref.current = 10
+    expect(ref.current).toBe(10)
+  })
+
+  test("same ref object persists across re-renders", () => {
+    const runner = createHookRunner()
+    const ref1 = runner.run(() => useRef(0))
+    ref1.current = 99
+    const ref2 = runner.run(() => useRef(0))
+    expect(ref1).toBe(ref2)
+    expect(ref2.current).toBe(99)
+  })
+})
+
+// ─── memo ─────────────────────────────────────────────────────────────────────
+
+describe("memo", () => {
+  test("skips re-render when props are shallowly equal", () => {
+    let renderCount = 0
+    const MyComp = (props: { name: string }) => {
+      renderCount++
+      return pyreonH("span", null, props.name)
+    }
+    const Memoized = memo(MyComp)
+    Memoized({ name: "a" })
+    expect(renderCount).toBe(1)
+    Memoized({ name: "a" })
+    expect(renderCount).toBe(1)
+    Memoized({ name: "b" })
+    expect(renderCount).toBe(2)
+  })
+
+  test("custom areEqual function", () => {
+    let renderCount = 0
+    const MyComp = (props: { x: number; y: number }) => {
+      renderCount++
+      return pyreonH("span", null, String(props.x))
+    }
+    const Memoized = memo(MyComp, (prev, next) => prev.x === next.x)
+    Memoized({ x: 1, y: 1 })
+    expect(renderCount).toBe(1)
+    Memoized({ x: 1, y: 999 })
+    expect(renderCount).toBe(1)
+    Memoized({ x: 2, y: 999 })
+    expect(renderCount).toBe(2)
+  })
+
+  test("different number of keys triggers re-render", () => {
+    let renderCount = 0
+    const MyComp = (_props: Record<string, unknown>) => {
+      renderCount++
+      return pyreonH("span", null, "x")
+    }
+    const Memoized = memo(MyComp)
+    Memoized({ a: 1 })
+    expect(renderCount).toBe(1)
+    Memoized({ a: 1, b: 2 })
+    expect(renderCount).toBe(2)
+  })
+})
+
+// ─── useId ────────────────────────────────────────────────────────────────────
+
+describe("useId", () => {
+  test("returns a unique string within a component", () => {
     const el = container()
     const ids: string[] = []
 
@@ -408,19 +675,51 @@ describe("@pyreon/preact-compat", () => {
       return pyreonH("div", null, "id-test")
     }
 
-    const unmount = mount(pyreonH(Comp, null), el)
-    expect(ids).toHaveLength(2)
-    expect(ids[0]).toBe(":r0:")
-    expect(ids[1]).toBe(":r1:")
-    unmount()
+    mount(jsx(Comp, {}), el)
+    expect(ids.length).toBeGreaterThanOrEqual(2)
+    expect(ids[0]).not.toBe(ids[1])
+    expect(typeof ids[0]).toBe("string")
+    expect(ids[0]?.startsWith(":r")).toBe(true)
   })
 
-  test("useErrorBoundary is exported", () => {
+  test("IDs are stable across re-renders", async () => {
+    const el = container()
+    const idHistory: string[] = []
+    let triggerSet: (v: number) => void = () => {}
+
+    const Comp = () => {
+      const [count, setCount] = useState(0)
+      triggerSet = setCount
+      const id = useId()
+      idHistory.push(id)
+      return pyreonH("div", null, `${id}-${count}`)
+    }
+
+    mount(jsx(Comp, {}), el)
+    const initialCount = idHistory.length
+    const firstId = idHistory[0]
+
+    triggerSet(1)
+    await new Promise<void>((r) => queueMicrotask(r))
+    await new Promise<void>((r) => queueMicrotask(r))
+    expect(idHistory.length).toBeGreaterThan(initialCount)
+    for (const id of idHistory) {
+      expect(id).toBe(firstId)
+    }
+  })
+})
+
+// ─── useErrorBoundary ────────────────────────────────────────────────────────
+
+describe("useErrorBoundary", () => {
+  test("is exported as a function", () => {
     expect(typeof useErrorBoundary).toBe("function")
   })
+})
 
-  // ─── Signals ─────────────────────────────────────────────────────────────
+// ─── Signals ─────────────────────────────────────────────────────────────────
 
+describe("signals", () => {
   test("signal() has .value accessor", () => {
     const count = signal(0)
     expect(count.value).toBe(0)
@@ -447,7 +746,7 @@ describe("@pyreon/preact-compat", () => {
   test("effect() tracks signal reads", () => {
     const count = signal(0)
     let observed = -1
-    const dispose = effect(() => {
+    const dispose = signalEffect(() => {
       observed = count.value
     })
     expect(observed).toBe(0)
@@ -455,13 +754,13 @@ describe("@pyreon/preact-compat", () => {
     expect(observed).toBe(7)
     dispose()
     count.value = 99
-    expect(observed).toBe(7) // disposed, should not update
+    expect(observed).toBe(7)
   })
 
   test("effect() with cleanup function", () => {
     const count = signal(0)
     let cleanups = 0
-    const dispose = effect(() => {
+    const dispose = signalEffect(() => {
       void count.value
       return () => {
         cleanups++
@@ -469,20 +768,17 @@ describe("@pyreon/preact-compat", () => {
     })
     expect(cleanups).toBe(0)
     count.value = 1
-    // Cleanup runs before re-run
     expect(cleanups).toBe(1)
     dispose()
-    // Cleanup runs on dispose
     expect(cleanups).toBe(2)
   })
 
   test("effect() with non-function return (no cleanup)", () => {
     const count = signal(0)
     let runs = 0
-    const dispose = effect(() => {
+    const dispose = signalEffect(() => {
       void count.value
       runs++
-      // no return
     })
     expect(runs).toBe(1)
     count.value = 1
@@ -494,7 +790,7 @@ describe("@pyreon/preact-compat", () => {
     const a = signal(1)
     const b = signal(2)
     let runs = 0
-    effect(() => {
+    signalEffect(() => {
       void a.value
       void b.value
       runs++
@@ -504,19 +800,131 @@ describe("@pyreon/preact-compat", () => {
       a.value = 10
       b.value = 20
     })
-    expect(runs).toBe(2) // single batch = single re-run
+    expect(runs).toBe(2)
   })
 
   test("signal peek() reads without tracking", () => {
     const count = signal(0)
     let observed = -1
-    const dispose = effect(() => {
+    const dispose = signalEffect(() => {
       observed = count.peek()
     })
     expect(observed).toBe(0)
     count.value = 5
-    // peek() is untracked, so effect should NOT re-run
     expect(observed).toBe(0)
     dispose()
   })
 })
+
+// ─── jsx-runtime ──────────────────────────────────────────────────────────────
+
+describe("jsx-runtime", () => {
+  test("jsx with string type creates element VNode", () => {
+    const vnode = jsx("div", { children: "hello" })
+    expect(vnode.type).toBe("div")
+    expect(vnode.children).toContain("hello")
+  })
+
+  test("jsx with key prop", () => {
+    const vnode = jsx("div", { children: "x" }, "my-key")
+    expect(vnode.props.key).toBe("my-key")
+  })
+
+  test("jsx with component wraps for re-render", () => {
+    const MyComp = () => pyreonH("span", null, "hi")
+    const vnode = jsx(MyComp, {})
+    expect(vnode.type).not.toBe(MyComp)
+    expect(typeof vnode.type).toBe("function")
+  })
+
+  test("jsx with Fragment", () => {
+    const vnode = jsx(Fragment, {
+      children: [pyreonH("span", null, "a"), pyreonH("span", null, "b")],
+    })
+    expect(vnode.type).toBe(Fragment)
+  })
+
+  test("jsx with single child (not array)", () => {
+    const vnode = jsx("div", { children: "text" })
+    expect(vnode.children).toHaveLength(1)
+  })
+
+  test("jsx with no children", () => {
+    const vnode = jsx("div", {})
+    expect(vnode.children).toHaveLength(0)
+  })
+
+  test("jsx component with children in props", () => {
+    const MyComp = (props: { children?: string }) => pyreonH("div", null, props.children ?? "")
+    const vnode = jsx(MyComp, { children: "child-text" })
+    expect(typeof vnode.type).toBe("function")
+  })
+})
+
+// ─── Hooks outside component ─────────────────────────────────────────────────
+
+describe("hooks outside component", () => {
+  test("useState throws when called outside render", () => {
+    expect(() => useState(0)).toThrow("Hook called outside")
+  })
+
+  test("useEffect throws when called outside render", () => {
+    expect(() => useEffect(() => {})).toThrow("Hook called outside")
+  })
+
+  test("useRef throws when called outside render", () => {
+    expect(() => useRef(0)).toThrow("Hook called outside")
+  })
+
+  test("useMemo throws when called outside render", () => {
+    expect(() => useMemo(() => 0, [])).toThrow("Hook called outside")
+  })
+
+  test("useId throws when called outside render", () => {
+    expect(() => useId()).toThrow("Hook called outside")
+  })
+
+  test("useReducer throws when called outside render", () => {
+    expect(() => useReducer((s: number) => s, 0)).toThrow("Hook called outside")
+  })
+})
+
+// ─── Edge cases ──────────────────────────────────────────────────────────────
+
+describe("edge cases", () => {
+  test("useState with string initial", () => {
+    const [val] = withHookCtx(() => useState("hello"))
+    expect(val).toBe("hello")
+  })
+
+  test("useReducer with non-function initial", () => {
+    const [state] = withHookCtx(() => useReducer((s: string, a: string) => s + a, "start"))
+    expect(state).toBe("start")
+  })
+
+  test("depsChanged handles different length arrays", () => {
+    const runner = createHookRunner()
+    runner.run(() => {
+      useEffect(() => {}, [1, 2])
+    })
+    expect(runner.ctx.pendingEffects).toHaveLength(1)
+
+    runner.run(() => {
+      useEffect(() => {}, [1, 2, 3])
+    })
+    expect(runner.ctx.pendingEffects).toHaveLength(1)
+  })
+
+  test("depsChanged with undefined deps always re-runs", () => {
+    const runner = createHookRunner()
+    runner.run(() => {
+      useEffect(() => {})
+    })
+    expect(runner.ctx.pendingEffects).toHaveLength(1)
+
+    runner.run(() => {
+      useEffect(() => {})
+    })
+    expect(runner.ctx.pendingEffects).toHaveLength(1)
+  })
+})