|
1 | | -import { act, renderHook } from '@testing-library/react'; |
| 1 | +import { renderHook } from '@testing-library/react'; |
2 | 2 | import { useEffectAsync } from './useEffectAsync'; |
3 | 3 |
|
4 | 4 | describe('useEffectAsync', () => { |
5 | 5 | it('invokes the async callback on mount', async () => { |
6 | | - const callback = vi.fn().mockResolvedValue(undefined); |
| 6 | + const callback = vi.fn().mockImplementation(async (signal: AbortSignal) => { |
| 7 | + expect(signal).toBeInstanceOf(AbortSignal); |
| 8 | + }); |
7 | 9 |
|
8 | 10 | renderHook(() => useEffectAsync(callback, [])); |
9 | 11 |
|
10 | 12 | await vi.waitFor(() => { |
11 | 13 | expect(callback).toHaveBeenCalledTimes(1); |
12 | 14 | }); |
13 | | - }); |
14 | 15 |
|
15 | | - it('does not apply callback side-effects after unmount (cancellation)', async () => { |
16 | | - let sideEffectApplied = false; |
17 | | - let resolveGate!: () => void; |
| 16 | + const [signal] = callback.mock.calls[0] as [AbortSignal]; |
| 17 | + expect(signal.aborted).toBe(false); |
| 18 | + }); |
18 | 19 |
|
19 | | - // Callback with a manual gate — won't complete until we call resolveGate() |
20 | | - const callback = vi.fn().mockImplementation(async () => { |
21 | | - await new Promise<void>((resolve) => { |
22 | | - resolveGate = resolve; |
23 | | - }); |
24 | | - sideEffectApplied = true; |
| 20 | + it('aborts the callback signal on unmount cleanup', async () => { |
| 21 | + let capturedSignal: AbortSignal | undefined; |
| 22 | + const callback = vi.fn().mockImplementation(async (signal: AbortSignal) => { |
| 23 | + capturedSignal = signal; |
25 | 24 | }); |
26 | | - |
27 | | - // render — effect fires (inside act), callback is called and suspended at the gate |
28 | 25 | const { unmount } = renderHook(() => useEffectAsync(callback, [])); |
29 | 26 |
|
30 | | - // Callback has been called but is suspended; side-effect not yet applied. |
31 | | - expect(callback).toHaveBeenCalledTimes(1); |
32 | | - expect(sideEffectApplied).toBe(false); |
33 | | - |
34 | | - // Unmount while the callback is in-flight — cleanup sets cancelled = true. |
35 | | - unmount(); |
36 | | - |
37 | | - // Open the gate so the callback can complete. |
38 | | - await act(async () => { |
39 | | - resolveGate(); |
40 | | - await Promise.resolve(); |
| 27 | + await vi.waitFor(() => { |
| 28 | + expect(callback).toHaveBeenCalledTimes(1); |
41 | 29 | }); |
42 | 30 |
|
43 | | - // The hook's cancelled flag is checked BEFORE calling the callback, |
44 | | - // not after it completes, so the in-flight side-effect does still apply. |
45 | | - // What the hook guarantees is that no *additional* invocation of the |
46 | | - // callback happens after cleanup — which we confirm here. |
47 | | - expect(callback).toHaveBeenCalledTimes(1); |
48 | | - expect(sideEffectApplied).toBe(true); |
| 31 | + unmount(); |
| 32 | + expect(capturedSignal?.aborted).toBe(true); |
49 | 33 | }); |
50 | 34 |
|
51 | 35 | it('cleans up (cancels) the previous effect and re-invokes callback when deps change', async () => { |
52 | | - const callOrder: string[] = []; |
53 | | - |
54 | | - const makeCallback = (label: string) => |
55 | | - vi.fn().mockImplementation(async () => { |
56 | | - callOrder.push(label); |
57 | | - }); |
58 | | - |
59 | | - const callback1 = makeCallback('first'); |
60 | | - const callback2 = makeCallback('second'); |
| 36 | + const signals: AbortSignal[] = []; |
| 37 | + const callback1 = vi.fn().mockImplementation(async (signal: AbortSignal) => { |
| 38 | + signals.push(signal); |
| 39 | + }); |
| 40 | + const callback2 = vi.fn().mockImplementation(async (signal: AbortSignal) => { |
| 41 | + signals.push(signal); |
| 42 | + }); |
61 | 43 |
|
62 | 44 | let cb = callback1; |
63 | 45 | const { rerender } = renderHook(() => useEffectAsync(cb, [cb])); |
64 | 46 |
|
65 | | - // First callback runs on mount. |
66 | 47 | await vi.waitFor(() => { |
67 | 48 | expect(callback1).toHaveBeenCalledTimes(1); |
68 | 49 | }); |
69 | 50 |
|
70 | | - // Change the dependency — triggers cleanup of the old effect and a new effect. |
71 | 51 | cb = callback2; |
72 | 52 | rerender(); |
73 | 53 |
|
74 | 54 | await vi.waitFor(() => { |
75 | 55 | expect(callback2).toHaveBeenCalledTimes(1); |
76 | 56 | }); |
77 | 57 |
|
78 | | - // Each callback ran exactly once, in the correct order. |
79 | | - expect(callOrder).toEqual(['first', 'second']); |
80 | | - // Old callback was not invoked again after cleanup. |
| 58 | + expect(signals[0].aborted).toBe(true); |
| 59 | + expect(signals[1].aborted).toBe(false); |
81 | 60 | expect(callback1).toHaveBeenCalledTimes(1); |
82 | 61 | }); |
| 62 | + |
| 63 | + it('calls AbortController.abort during cleanup', async () => { |
| 64 | + const abortSpy = vi.spyOn(AbortController.prototype, 'abort'); |
| 65 | + const callback = vi.fn().mockImplementation(async (signal: AbortSignal) => { |
| 66 | + expect(signal).toBeInstanceOf(AbortSignal); |
| 67 | + }); |
| 68 | + const { unmount } = renderHook(() => useEffectAsync(callback, [])); |
| 69 | + |
| 70 | + await vi.waitFor(() => { |
| 71 | + expect(callback).toHaveBeenCalledTimes(1); |
| 72 | + }); |
| 73 | + |
| 74 | + unmount(); |
| 75 | + expect(abortSpy).toHaveBeenCalledTimes(1); |
| 76 | + |
| 77 | + abortSpy.mockRestore(); |
| 78 | + }); |
83 | 79 | }); |
0 commit comments