@ersbeth/picoflow 1.1.2 → 2.0.0

package/test/reactivity/nodes/async/flowStateAsync.test.ts

@@ -0,0 +1,708 @@
+import { describe, expect, it, vi } from "vitest";
+import { stateAsync, subscribe } from "~";
+import { EffectNode } from "~/nodes";
+
+describe("flowStateAsync", () => {
+    describe("unit", () => {
+        describe("initialization", () => {
+            it("should initialize with direct Promise", async () => {
+                const $state = stateAsync(Promise.resolve(1));
+                expect(await $state.pick()).toBe(1);
+            });
+
+            it("should initialize lazily with function", async () => {
+                const initFn = vi.fn(() => Promise.resolve(42));
+                const $state = stateAsync(initFn);
+
+                expect(initFn).not.toHaveBeenCalled();
+
+                const value = await $state.pick();
+                expect(value).toBe(42);
+                expect(initFn).toHaveBeenCalledTimes(1);
+            });
+        });
+
+        describe("set", () => {
+            it("should update value with Promise", async () => {
+                const $state = stateAsync(Promise.resolve(1));
+                expect(await $state.pick()).toBe(1);
+
+                $state.set(Promise.resolve(2));
+                expect(await $state.pick()).toBe(2);
+            });
+
+            it("should update value with updater function", async () => {
+                const $state = stateAsync(Promise.resolve(1));
+                expect(await $state.pick()).toBe(1);
+
+                $state.set(async (current) => (current !== undefined ? current + 1 : 0));
+                expect(await $state.pick()).toBe(2);
+            });
+
+            it("should return void", () => {
+                const $state = stateAsync(Promise.resolve(1));
+                const result = $state.set(Promise.resolve(2));
+                expect(result).toBeUndefined();
+            });
+
+            it("should notify when set with same value", async () => {
+                const $state = stateAsync(Promise.resolve(1));
+                const onData = vi.fn();
+                $state.subscribe(onData);
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+                expect(onData).toHaveBeenLastCalledWith(1);
+
+                $state.set(Promise.resolve(1));
+
+                await new Promise((resolve) => setTimeout(resolve, 50));
+                expect(onData).toHaveBeenCalledTimes(3);
+            });
+
+            it("should notify when set with different value", async () => {
+                const $state = stateAsync(Promise.resolve(1));
+                const onData = vi.fn();
+                $state.subscribe(onData);
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+                expect(onData).toHaveBeenLastCalledWith(1);
+
+                $state.set(Promise.resolve(2));
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(3));
+                expect(onData).toHaveBeenLastCalledWith(2);
+            });
+
+            it("should notify when updater returns same value", async () => {
+                const $state = stateAsync(Promise.resolve(5));
+                const onData = vi.fn();
+                $state.subscribe(onData);
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+
+                $state.set(async (current) => current ?? 0);
+
+                await new Promise((resolve) => setTimeout(resolve, 50));
+                expect(onData).toHaveBeenCalledTimes(3);
+            });
+
+            it("should notify when updater returns different value", async () => {
+                const $state = stateAsync(Promise.resolve(5));
+                const onData = vi.fn();
+                $state.subscribe(onData);
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+                expect(onData).toHaveBeenLastCalledWith(5);
+
+                $state.set(async (current) => (current ? current + 1 : 0));
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(3));
+                expect(onData).toHaveBeenLastCalledWith(6);
+            });
+
+            it("should handle async updater function", async () => {
+                const $state = stateAsync(Promise.resolve(1));
+                expect(await $state.pick()).toBe(1);
+                $state.set(async (current) => {
+                    await new Promise((resolve) => setTimeout(resolve, 10));
+                    return (current ?? 0) + 10;
+                });
+
+                expect(await $state.pick()).toBe(11);
+            });
+
+            it("should handle Promise rejection in set", async () => {
+                const $state = stateAsync(Promise.resolve(1));
+                const error = new Error("Set error");
+                $state.set(Promise.reject(error));
+                await expect($state.pick()).rejects.toThrow(error);
+            });
+
+            it("should throw error when set is called after disposal", async () => {
+                const $state = stateAsync(Promise.resolve(1));
+
+                expect(await $state.pick()).toBe(1);
+                $state.set(Promise.resolve(2));
+                expect(await $state.pick()).toBe(2);
+
+                $state.dispose();
+
+                expect(() => $state.set(Promise.resolve(3))).toThrow("[PicoFlow] Primitive is disposed");
+            });
+        });
+
+        describe("subscribe", () => {
+            it("should return an effect", () => {
+                const $state = stateAsync(Promise.resolve(50));
+                const onData = vi.fn();
+                const effect = $state.subscribe(onData);
+
+                expect(effect).toBeInstanceOf(EffectNode);
+            });
+
+            it("should call onData immediately with current value", async () => {
+                const $state = stateAsync(Promise.resolve(55));
+                const onData = vi.fn();
+
+                $state.subscribe(onData);
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+                expect(onData).toHaveBeenLastCalledWith(55);
+            });
+
+            it("should call onData with lazy init value", async () => {
+                const $state = stateAsync(async () => 60);
+                const onData = vi.fn();
+
+                $state.subscribe(onData);
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+                expect(onData).toHaveBeenLastCalledWith(60);
+            });
+
+            it("should call onData when value is updated via set()", async () => {
+                const $state = stateAsync(Promise.resolve(65));
+                const onData = vi.fn();
+
+                $state.subscribe(onData);
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+
+                $state.set(Promise.resolve(70));
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(3));
+                expect(onData).toHaveBeenLastCalledWith(70);
+            });
+
+            // it("should not call onData when set() with same value", async () => {
+            //     const $state = stateAsync(Promise.resolve(75));
+            //     const onData = vi.fn();
+
+            //     $state.subscribe(onData);
+            //     await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+
+            //     $state.set(Promise.resolve(80));
+            //     await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(2));
+
+            //     $state.set(Promise.resolve(80));
+            //     await new Promise((resolve) => setTimeout(resolve, 50));
+            //     expect(onData).toHaveBeenCalledTimes(2);
+            // });
+
+            it("should not call onData after disposer is called", async () => {
+                const $state = stateAsync(Promise.resolve(85));
+                const onData = vi.fn();
+
+                const effect = $state.subscribe(onData);
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+
+                effect.dispose();
+
+                $state.set(Promise.resolve(90));
+                await new Promise((resolve) => setTimeout(resolve, 50));
+                expect(onData).toHaveBeenCalledTimes(1);
+            });
+
+            it("should support multiple subscriptions", async () => {
+                const $state = stateAsync(Promise.resolve(95));
+                const onData1 = vi.fn();
+                const onData2 = vi.fn();
+                const onData3 = vi.fn();
+
+                $state.subscribe(onData1);
+                $state.subscribe(onData2);
+                $state.subscribe(onData3);
+
+                await vi.waitFor(() => {
+                    expect(onData1).toHaveBeenCalledTimes(1);
+                    expect(onData2).toHaveBeenCalledTimes(1);
+                    expect(onData3).toHaveBeenCalledTimes(1);
+                });
+
+                expect(onData1).toHaveBeenLastCalledWith(95);
+                expect(onData2).toHaveBeenLastCalledWith(95);
+                expect(onData3).toHaveBeenLastCalledWith(95);
+            });
+
+            it("should support multiple subscriptions with notifications via set()", async () => {
+                const $state = stateAsync(Promise.resolve(100));
+                const onData1 = vi.fn();
+                const onData2 = vi.fn();
+
+                $state.subscribe(onData1);
+                $state.subscribe(onData2);
+
+                await vi.waitFor(() => {
+                    expect(onData1).toHaveBeenCalledTimes(1);
+                    expect(onData2).toHaveBeenCalledTimes(1);
+                });
+
+                $state.set(Promise.resolve(200));
+                await vi.waitFor(() => {
+                    expect(onData1).toHaveBeenCalledTimes(3);
+                    expect(onData2).toHaveBeenCalledTimes(3);
+                });
+
+                expect(onData1).toHaveBeenLastCalledWith(200);
+                expect(onData2).toHaveBeenLastCalledWith(200);
+            });
+
+            it("should throw error when subscribe is called after disposal", () => {
+                const $state = stateAsync(Promise.resolve(1));
+                const onData = vi.fn();
+
+                $state.dispose();
+
+                expect(() => $state.subscribe(onData)).toThrow("[PicoFlow] Primitive is disposed");
+            });
+        });
+
+        describe("trigger", () => {
+            it("should return void", () => {
+                const $state = stateAsync(Promise.resolve(1));
+                const result = $state.trigger();
+                expect(result).toBeUndefined();
+            });
+
+            it("should allow multiple triggers", async () => {
+                const $state = stateAsync(Promise.resolve(1));
+                $state.trigger();
+                $state.trigger();
+                $state.trigger();
+
+                // Should not throw
+                expect(await $state.pick()).toBe(1);
+            });
+        });
+
+        describe("nesting", () => {
+            it("should handle nested states with set()", async () => {
+                const $stateA = stateAsync(Promise.resolve(1));
+                const $stateB = stateAsync(Promise.resolve(2));
+                const $stateC = stateAsync(
+                    Promise.resolve({
+                        a: $stateA,
+                        b: $stateB,
+                    }),
+                );
+
+                const value = await $stateC.pick();
+                expect(value.a).toBe($stateA);
+                expect(value.b).toBe($stateB);
+
+                $stateA.set(Promise.resolve(3));
+                expect(await $stateA.pick()).toBe(3);
+            });
+
+            it("should handle state with complex object values and set()", async () => {
+                const complexObj = {
+                    nested: { deep: { value: 42 } },
+                    array: [1, 2, 3],
+                };
+                const $state = stateAsync(Promise.resolve(complexObj));
+                const value = await $state.pick();
+                expect(value).toBe(complexObj);
+                expect(value.nested.deep.value).toBe(42);
+                expect(value.array).toEqual([1, 2, 3]);
+
+                const newObj = {
+                    nested: { deep: { value: 100 } },
+                    array: [4, 5, 6],
+                };
+                $state.set(Promise.resolve(newObj));
+                const newValue = await $state.pick();
+                expect(newValue.nested.deep.value).toBe(100);
+                expect(newValue.array).toEqual([4, 5, 6]);
+            });
+        });
+
+        describe("error handling", () => {
+            describe("disposed state", () => {
+                it("should throw error when set is called after disposal", async () => {
+                    const $state = stateAsync(Promise.resolve(1));
+
+                    await $state.pick();
+                    $state.set(Promise.resolve(2));
+                    $state.dispose();
+
+                    expect(() => $state.set(Promise.resolve(3))).toThrow("[PicoFlow] Primitive is disposed");
+                });
+
+                it("should throw error when trigger is called after disposal", () => {
+                    const $state = stateAsync(Promise.resolve(1));
+                    $state.dispose();
+                    expect(() => $state.trigger()).toThrow("[PicoFlow] Primitive is disposed");
+                });
+            });
+        });
+    });
+
+    describe("with effect", () => {
+        describe("get", () => {
+            it("should create reactive dependency when get is used in effect", async () => {
+                const $state = stateAsync(Promise.resolve(100));
+                const onData = vi.fn();
+                const onError = vi.fn();
+
+                subscribe((t) => $state.get(t), onData, onError);
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+                await vi.waitFor(() => expect(onError).toHaveBeenCalledTimes(0));
+                expect(onData).toHaveBeenLastCalledWith(100);
+            });
+
+            it("should call effect with initial value", async () => {
+                const $state = stateAsync(Promise.resolve(1));
+                const onData = vi.fn();
+                const onError = vi.fn();
+
+                subscribe((t) => $state.get(t), onData, onError);
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+                await vi.waitFor(() => expect(onError).toHaveBeenCalledTimes(0));
+                expect(onData).toHaveBeenLastCalledWith(1);
+            });
+
+            it("should call effect with lazy init value", async () => {
+                const $state = stateAsync(async () => 1);
+                const onData = vi.fn();
+                const onError = vi.fn();
+
+                subscribe((t) => $state.get(t), onData, onError);
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+                await vi.waitFor(() => expect(onError).toHaveBeenCalledTimes(0));
+                expect(onData).toHaveBeenLastCalledWith(1);
+            });
+
+            it("should call effect when value is updated via set()", async () => {
+                const $state = stateAsync(Promise.resolve(1));
+                const onData = vi.fn();
+                const onError = vi.fn();
+
+                subscribe((t) => $state.get(t), onData, onError);
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+                expect(onData).toHaveBeenLastCalledWith(1);
+
+                $state.set(Promise.resolve(2));
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(3));
+                expect(onData).toHaveBeenLastCalledWith(2);
+            });
+
+            it("should not call effect when set() with same value", async () => {
+                const $state = stateAsync(Promise.resolve(1));
+                const onData = vi.fn();
+                const onError = vi.fn();
+
+                subscribe((t) => $state.get(t), onData, onError);
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+
+                $state.set(Promise.resolve(2));
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(3));
+                expect(onData).toHaveBeenLastCalledWith(2);
+
+                $state.set(Promise.resolve(2));
+                await new Promise((resolve) => setTimeout(resolve, 50));
+                expect(onData).toHaveBeenCalledTimes(5);
+                expect(onData).toHaveBeenLastCalledWith(2);
+                expect(onError).toHaveBeenCalledTimes(0);
+            });
+
+            it("should not call effect after effect is disposed", async () => {
+                const $state = stateAsync(Promise.resolve(1));
+                const onData = vi.fn();
+                const onError = vi.fn();
+                const $effect = subscribe((t) => $state.get(t), onData, onError);
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+                expect(onData).toHaveBeenLastCalledWith(1);
+
+                $state.set(Promise.resolve(2));
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(3));
+                expect(onData).toHaveBeenLastCalledWith(2);
+
+                $effect.dispose();
+
+                $state.set(Promise.resolve(3));
+                await new Promise((resolve) => setTimeout(resolve, 50));
+                expect(onData).toHaveBeenCalledTimes(3);
+            });
+
+            it("should support effect depending on multiple states", async () => {
+                const $stateA = stateAsync(Promise.resolve(5));
+                const $stateB = stateAsync(Promise.resolve(10));
+                const onData = vi.fn();
+                const onError = vi.fn();
+
+                subscribe(
+                    (t) => ({ a: $stateA.get(t), b: $stateB.get(t) }),
+                    (data) => onData(data.a, data.b),
+                    onError,
+                );
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+                expect(onData).toHaveBeenLastCalledWith(5, 10);
+
+                $stateA.set(Promise.resolve(6));
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(3));
+                expect(onData).toHaveBeenLastCalledWith(6, 10);
+
+                $stateB.set(Promise.resolve(11));
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(5));
+                expect(onData).toHaveBeenLastCalledWith(6, 11);
+            });
+
+            it("should support multiple effects depending on same state", async () => {
+                const $state = stateAsync(Promise.resolve(200));
+                const onData1 = vi.fn();
+                const onData2 = vi.fn();
+                const onData3 = vi.fn();
+
+                const onError1 = vi.fn();
+                const onError2 = vi.fn();
+                const onError3 = vi.fn();
+
+                subscribe((t) => $state.get(t), onData1, onError1);
+                subscribe((t) => $state.get(t), onData2, onError2);
+                subscribe((t) => $state.get(t), onData3, onError3);
+
+                await vi.waitFor(() => {
+                    expect(onData1).toHaveBeenCalledTimes(1);
+                    expect(onData2).toHaveBeenCalledTimes(1);
+                    expect(onData3).toHaveBeenCalledTimes(1);
+                });
+
+                expect(onError1).toHaveBeenCalledTimes(0);
+                expect(onError2).toHaveBeenCalledTimes(0);
+                expect(onError3).toHaveBeenCalledTimes(0);
+
+                expect(onData1).toHaveBeenLastCalledWith(200);
+                expect(onData2).toHaveBeenLastCalledWith(200);
+                expect(onData3).toHaveBeenLastCalledWith(200);
+
+                $state.set(Promise.resolve(300));
+                await vi.waitFor(() => {
+                    expect(onData1).toHaveBeenCalledTimes(3);
+                    expect(onData2).toHaveBeenCalledTimes(3);
+                    expect(onData3).toHaveBeenCalledTimes(3);
+                });
+            });
+        });
+
+        describe("watch", () => {
+            it("should register dependency when watch is used in effect", async () => {
+                const $state = stateAsync(Promise.resolve(400));
+                const onData = vi.fn();
+                const onError = vi.fn();
+
+                subscribe((t) => $state.watch(t), onData, onError);
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+            });
+
+            it("should trigger re-runs when state changes via set() after watch", async () => {
+                const $state = stateAsync(Promise.resolve(500));
+                const onData = vi.fn();
+                const onError = vi.fn();
+
+                subscribe((t) => $state.watch(t), onData, onError);
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+
+                $state.set(Promise.resolve(600));
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(3));
+            });
+        });
+
+        describe("error handling", () => {
+            describe("compute function errors", () => {
+                it("should propagate error when lazy init throws in effect", async () => {
+                    const error = new Error("Effect init error");
+                    const $state = stateAsync(async () => {
+                        await Promise.resolve();
+                        throw error;
+                    });
+                    const onData = vi.fn();
+                    const onError = vi.fn();
+
+                    subscribe((t) => $state.get(t), onData, onError);
+
+                    await vi.waitFor(() => expect(onError).toHaveBeenCalledTimes(1));
+                    expect(onData).toHaveBeenCalledTimes(0);
+                    expect(onError).toHaveBeenLastCalledWith(error);
+                });
+            });
+
+            describe("disposed state", () => {
+                it("should throw error when creating an effect with a disposed state", async () => {
+                    const $state = stateAsync(Promise.resolve(1));
+                    const onData = vi.fn();
+                    const onError = vi.fn();
+
+                    $state.dispose();
+
+                    subscribe((t) => $state.get(t), onData, onError);
+
+                    await vi.waitFor(() => expect(onError).toHaveBeenCalledTimes(1));
+                    expect(onData).toHaveBeenCalledTimes(0);
+                    expect(onError).toHaveBeenLastCalledWith(expect.any(Error));
+                });
+            });
+
+            describe("set errors", () => {
+                it("should handle Promise rejection during set() in effect", async () => {
+                    const $state = stateAsync(Promise.resolve(1));
+                    const onData = vi.fn();
+                    const onError = vi.fn();
+
+                    subscribe((t) => $state.get(t), onData, onError);
+
+                    await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+
+                    const error = new Error("Set error");
+                    $state.set(Promise.reject(error));
+
+                    await vi.waitFor(() => expect(onError).toHaveBeenCalledTimes(2));
+                    expect(onError).toHaveBeenLastCalledWith(error);
+                });
+            });
+        });
+
+        describe("disposal", () => {
+            it("should not dispose effects when state is disposed", async () => {
+                const $state = stateAsync(Promise.resolve(1400));
+                const onData = vi.fn();
+                const onError = vi.fn();
+
+                const $effect = subscribe((t) => $state.get(t), onData, onError);
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+                expect($effect.disposed).toBe(false);
+
+                $state.dispose();
+
+                expect($effect.disposed).toBe(false);
+                expect($state.disposed).toBe(true);
+            });
+
+            it("should unregister effects when state is disposed", async () => {
+                const $state = stateAsync(Promise.resolve(1500));
+                const onData = vi.fn();
+                const onError = vi.fn();
+
+                const $effect = subscribe((t) => $state.get(t), onData, onError);
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+
+                $state.dispose();
+
+                // Effect should still be active but not notified
+                expect($effect.disposed).toBe(false);
+
+                // But state is disposed so operations should fail
+                await expect($state.pick()).rejects.toThrow("[PicoFlow] Primitive is disposed");
+            });
+        });
+
+        describe("complex cases", () => {
+            it("should handle nested states in effects with set()", async () => {
+                const $stateA = stateAsync(Promise.resolve(1));
+                const $stateB = stateAsync(Promise.resolve(2));
+                const $stateC = stateAsync(
+                    Promise.resolve({
+                        a: $stateA,
+                        b: $stateB,
+                    }),
+                );
+
+                const onData = vi.fn();
+                const onError = vi.fn();
+
+                subscribe(
+                    (t) => ({
+                        a: $stateC.get(t).a.get(t),
+                        b: $stateC.get(t).b.get(t),
+                    }),
+                    (data) => onData(data.a, data.b),
+                    onError,
+                );
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+                expect(onData).toHaveBeenLastCalledWith(1, 2);
+
+                $stateA.set(Promise.resolve(3));
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(3));
+                expect(onData).toHaveBeenLastCalledWith(3, 2);
+            });
+
+            it("should handle effect depending on multiple states with set()", async () => {
+                const $stateA = stateAsync(Promise.resolve(10));
+                const $stateB = stateAsync(Promise.resolve(20));
+                const $stateC = stateAsync(Promise.resolve(30));
+                const onData = vi.fn();
+                const onError = vi.fn();
+
+                subscribe(
+                    (t) => ({
+                        a: $stateA.get(t),
+                        b: $stateB.get(t),
+                        c: $stateC.get(t),
+                    }),
+                    (data) => onData(data.a, data.b, data.c),
+                    onError,
+                );
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+                expect(onData).toHaveBeenLastCalledWith(10, 20, 30);
+
+                $stateA.set(Promise.resolve(11));
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(3));
+                expect(onData).toHaveBeenLastCalledWith(11, 20, 30);
+
+                $stateB.set(Promise.resolve(21));
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(5));
+                expect(onData).toHaveBeenLastCalledWith(11, 21, 30);
+            });
+        });
+
+        describe("execution order", () => {
+            it("should execute multiple effects in order", async () => {
+                const $state = stateAsync(Promise.resolve(1));
+                const onData = vi.fn();
+
+                subscribe((t) => `effect1-${$state.get(t)}`, onData);
+
+                subscribe((t) => `effect2-${$state.get(t)}`, onData);
+
+                subscribe((t) => `effect3-${$state.get(t)}`, onData);
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(3));
+
+                expect(onData).toHaveBeenNthCalledWith(1, "effect1-1");
+                expect(onData).toHaveBeenNthCalledWith(2, "effect2-1");
+                expect(onData).toHaveBeenNthCalledWith(3, "effect3-1");
+            });
+
+            it("should handle async set() in effects", async () => {
+                const $state = stateAsync(Promise.resolve(1));
+                const onData = vi.fn();
+
+                subscribe((t) => `effect-${$state.get(t)}`, onData);
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(1));
+
+                onData("before-set");
+                $state.set(
+                    (async () => {
+                        await new Promise((resolve) => setTimeout(resolve, 10));
+                        return 2;
+                    })(),
+                );
+                onData("after-set");
+
+                await vi.waitFor(() => expect(onData).toHaveBeenCalledTimes(4));
+                expect(onData).toHaveBeenNthCalledWith(1, "effect-1");
+                expect(onData).toHaveBeenNthCalledWith(2, "before-set");
+                expect(onData).toHaveBeenNthCalledWith(3, "after-set");
+                expect(onData).toHaveBeenNthCalledWith(4, "effect-2");
+            });
+        });
+    });
+});