@mic-rexjs/usecases-react 2.3.1 → 2.3.4

package/es/hooks/useUseCase/index.test.js

@@ -19,18 +19,21 @@ const defaultFile = {
 };
 const fileUseCase = (options = {}) => {
     const entityReducers = objectUseCase();
-    const { pathPrefix = '' } = options;
+    const { pathPrefix = '', onPathChange } = options;
     const init = function* (entity, newEntity = defaultFile) {
         yield () => {
             return newEntity;
         };
     };
     const setPath = function* (entity, path) {
+        const { path: oldPath } = entity;
+        const newPath = pathPrefix + path;
         yield {
             ...entity,
-            path: pathPrefix + path,
+            path: newPath,
             ext: path.match(/\.[^.]+$/)?.[0] || '',
         };
+        onPathChange?.(newPath, oldPath);
     };
     const readFile = async function* (entity, path) {
         const size = 2000;
@@ -60,9 +63,6 @@ const mathUseCase = (options = {}) => {
     };
     return { add, subtraction: subtractionReducer };
 };
-const fieldPathUseCase = () => {
-    return objectUseCase();
-};
 const Child = ({ textPrefix = '', onUpdate, onPathChange, onUndefinedEntity }) => {
     const [file, { setPath }] = useUseCase(fileUseCase);
     const { path, ext } = file || {};
@@ -428,6 +428,31 @@ describe('useUseCase', () => {
             expect(onChange).toHaveBeenCalledTimes(1);
             expect(onChange).toHaveBeenLastCalledWith({ ...defaultFile, path: PATH_1, ext: EXT_1 }, defaultFile);
         });
+        test('`options.onChange` should always trigger the latest one', () => {
+            const onChange1 = jest.fn();
+            const onChange2 = jest.fn();
+            let onChange = onChange1;
+            const { result } = renderHook(() => {
+                return useUseCase(defaultFile, fileUseCase, { onChange }, []);
+            });
+            const { current: cores } = result;
+            const [, reducers] = cores;
+            const { setPath } = reducers;
+            expect(onChange1).toHaveBeenCalledTimes(0);
+            act(() => {
+                setPath(PATH_1);
+                onChange = onChange2;
+            });
+            expect(onChange2).toHaveBeenCalledTimes(0);
+            expect(onChange1).toHaveBeenCalledTimes(1);
+            expect(onChange1).toHaveBeenLastCalledWith({ ...defaultFile, path: PATH_1, ext: EXT_1 }, defaultFile);
+            act(() => {
+                setPath(PATH_2);
+            });
+            expect(onChange1).toHaveBeenCalledTimes(1);
+            expect(onChange2).toHaveBeenCalledTimes(1);
+            expect(onChange2).toHaveBeenLastCalledWith({ ...defaultFile, path: PATH_2, ext: EXT_2 }, { ...defaultFile, path: PATH_1, ext: EXT_1 });
+        });
         test('`options.options` should override rest options', () => {
             const { result } = renderHook(() => {
                 return useUseCase(defaultFile, fileUseCase, {
@@ -466,72 +491,6 @@ describe('useUseCase', () => {
             expect(onUpdate).toHaveBeenCalledTimes(0);
             expect(onDeepUpdate).toHaveBeenCalledTimes(0);
         });
-        test('when `entity` change, it should trigger watchers', () => {
-            const onPathChange = jest.fn();
-            const onSizeChange = jest.fn();
-            const { result } = renderHook(() => {
-                return useUseCase(defaultFile, fileUseCase, {
-                    watch: {
-                        path: onPathChange,
-                        size: onSizeChange,
-                    },
-                });
-            });
-            const { current: cores } = result;
-            const [, { setPath }] = cores;
-            expect(onPathChange).toHaveBeenCalledTimes(0);
-            act(() => {
-                setPath(PATH_1);
-            });
-            expect(onPathChange).toHaveBeenCalledTimes(1);
-            expect(onSizeChange).toHaveBeenCalledTimes(0);
-            expect(onPathChange).toHaveBeenLastCalledWith({
-                fieldPaths: ['path'],
-                newEntity: { ...defaultFile, path: PATH_1, ext: EXT_1 },
-                oldEntity: defaultFile,
-                newValue: PATH_1,
-                oldValue: '',
-            });
-        });
-        test('watcher should be updated after `entity` change', () => {
-            const onPathChange1 = jest.fn();
-            const onPathChange2 = jest.fn();
-            let onPathChange = onPathChange1;
-            const { result } = renderHook(() => {
-                return useUseCase(defaultFile, fileUseCase, {
-                    watch: {
-                        path: onPathChange,
-                    },
-                });
-            });
-            const { current: cores } = result;
-            const [, { setPath, setEntity }] = cores;
-            onPathChange = onPathChange2;
-            expect(onPathChange1).toHaveBeenCalledTimes(0);
-            act(() => {
-                setPath(PATH_1);
-                setEntity({ size: 5000 });
-            });
-            expect(onPathChange1).toHaveBeenCalledTimes(1);
-            expect(onPathChange1).toHaveBeenLastCalledWith({
-                fieldPaths: ['path'],
-                newEntity: { ...defaultFile, path: PATH_1, ext: EXT_1 },
-                oldEntity: defaultFile,
-                newValue: PATH_1,
-                oldValue: '',
-            });
-            act(() => {
-                setPath('');
-            });
-            expect(onPathChange2).toHaveBeenCalledTimes(1);
-            expect(onPathChange2).toHaveBeenLastCalledWith({
-                fieldPaths: ['path'],
-                newEntity: { ...defaultFile, size: 5000 },
-                oldEntity: { ...defaultFile, path: PATH_1, size: 5000, ext: EXT_1 },
-                newValue: '',
-                oldValue: PATH_1,
-            });
-        });
         test('when `deps` has changed, it should trigger update', () => {
             const onUpdate = jest.fn();
             const onDeepUpdate = jest.fn();
@@ -576,506 +535,28 @@ describe('useUseCase', () => {
             expect(onUpdate).toHaveBeenCalledTimes(0);
             expect(onDeepUpdate).toHaveBeenCalledTimes(0);
         });
-        test('`options.watch` should be trigger at child elements', () => {
-            const onFirstExtChange = jest.fn();
-            const onSecondExtChange = jest.fn();
-            const onParentExtChange = jest.fn();
-            let onExtChange = onFirstExtChange;
-            const firstButtonText = 'first button';
-            const secondButtonText = 'second button';
-            const A = () => {
-                useUseCase(fileUseCase, {
-                    watch: {
-                        ext: onExtChange,
-                    },
-                });
-                return _jsx(Fragment, {});
-            };
-            const B = () => {
-                const [, { setPath }, Provider] = useUseCase(defaultFile, fileUseCase, {
-                    watch: {
-                        ext: onParentExtChange,
-                    },
-                });
-                const onFirstClick = () => {
-                    setPath(PATH_1);
-                    onExtChange = onSecondExtChange;
-                };
-                const onSecondClick = () => {
-                    setPath('');
-                };
-                return (_jsxs(Provider, { children: [_jsx(A, {}), _jsx("button", { onClick: onFirstClick, children: firstButtonText }), _jsx("button", { onClick: onSecondClick, children: secondButtonText })] }));
-            };
-            render(_jsx(B, {}));
-            expect(onFirstExtChange).toHaveBeenCalledTimes(0);
-            fireEvent.click(screen.getByText(firstButtonText));
-            expect(onFirstExtChange).toHaveBeenCalledTimes(1);
-            expect(onFirstExtChange).toHaveBeenLastCalledWith({
-                fieldPaths: ['ext'],
-                newEntity: { ...defaultFile, ext: EXT_1, path: PATH_1 },
-                oldEntity: defaultFile,
-                newValue: EXT_1,
-                oldValue: '',
-            });
-            expect(onParentExtChange).toHaveBeenCalledTimes(1);
-            expect(onSecondExtChange).toHaveBeenCalledTimes(0);
-            fireEvent.click(screen.getByText(secondButtonText));
-            expect(onSecondExtChange).toHaveBeenCalledTimes(1);
-            expect(onSecondExtChange).toHaveBeenLastCalledWith({
-                fieldPaths: ['ext'],
-                newEntity: defaultFile,
-                oldEntity: { ...defaultFile, ext: EXT_1, path: PATH_1 },
-                newValue: '',
-                oldValue: EXT_1,
-            });
-            expect(onFirstExtChange).toHaveBeenCalledTimes(1);
-            expect(onParentExtChange).toHaveBeenCalledTimes(2);
-        });
-        test('`options.watch` should be trigger in orders', () => {
-            let changeTimes = 0;
-            const updateChangeTimes = (e) => {
-                void e;
-                return ++changeTimes;
-            };
-            const onChangeA = jest.fn(updateChangeTimes);
-            const onChangeB = jest.fn(updateChangeTimes);
-            const onChangeC = jest.fn(updateChangeTimes);
-            const buttonText = 'my button';
-            const A = ({ children }) => {
-                useUseCase(fileUseCase, {
-                    watch: {
-                        ext: onChangeA,
-                    },
-                });
-                return _jsx(Fragment, { children: children });
-            };
-            const B = () => {
-                useUseCase(fileUseCase, {
-                    watch: {
-                        ext: onChangeB,
-                    },
-                });
-                return _jsx(Fragment, {});
-            };
-            const C = () => {
-                const [, { setPath }, Provider] = useUseCase(defaultFile, fileUseCase, {
-                    watch: {
-                        ext: onChangeC,
-                    },
-                });
-                const onFirstClick = () => {
-                    setPath(PATH_1);
-                };
-                return (_jsxs(Provider, { children: [_jsx(A, { children: _jsx(B, {}) }), _jsx("button", { onClick: onFirstClick, children: buttonText })] }));
-            };
-            render(_jsx(C, {}));
-            expect(changeTimes).toBe(0);
-            fireEvent.click(screen.getByText(buttonText));
-            expect(onChangeA).toHaveReturnedWith(2);
-            expect(onChangeB).toHaveReturnedWith(1);
-            expect(onChangeC).toHaveReturnedWith(3);
-        });
-        test('`options.watch` should work with array field path of array', () => {
-            const onExtChange = jest.fn();
-            const onSizeChange = jest.fn();
-            const { result } = renderHook(() => {
-                return useUseCase({}, fieldPathUseCase, {
-                    watch: {
-                        'list.ext': onExtChange,
-                        'list.size': onSizeChange,
-                    },
-                });
-            });
-            const { current: cores } = result;
-            const [, { setEntity }] = cores;
-            act(() => {
-                setEntity({ list: [defaultFile] });
-            });
-            expect(onExtChange).toHaveBeenCalledTimes(1);
-            expect(onSizeChange).toHaveBeenCalledTimes(1);
-            expect(onExtChange).toHaveBeenCalledWith({
-                fieldPaths: ['list', '0', 'ext'],
-                newEntity: { list: [defaultFile] },
-                oldEntity: {},
-                newValue: '',
-                oldValue: void 0,
-            });
-            expect(onSizeChange).toHaveBeenCalledWith({
-                fieldPaths: ['list', '0', 'size'],
-                newEntity: { list: [defaultFile] },
-                oldEntity: {},
-                newValue: 0,
-                oldValue: void 0,
-            });
-            act(() => {
-                setEntity({ list: [{ ...defaultFile, ext: EXT_1 }] });
-            });
-            expect(onExtChange).toHaveBeenCalledTimes(2);
-            expect(onSizeChange).toHaveBeenCalledTimes(1);
-            expect(onExtChange).toHaveBeenCalledWith({
-                fieldPaths: ['list', '0', 'ext'],
-                newEntity: { list: [{ ...defaultFile, ext: EXT_1 }] },
-                oldEntity: { list: [defaultFile] },
-                newValue: EXT_1,
-                oldValue: '',
-            });
-            act(() => {
-                setEntity({
-                    list: [
-                        { ...defaultFile, ext: EXT_1 },
-                        { ...defaultFile, ext: EXT_2 },
-                    ],
-                });
-            });
-            expect(onExtChange).toHaveBeenCalledTimes(3);
-            expect(onSizeChange).toHaveBeenCalledTimes(2);
-            expect(onExtChange).toHaveBeenCalledWith({
-                fieldPaths: ['list', '1', 'ext'],
-                newEntity: {
-                    list: [
-                        { ...defaultFile, ext: EXT_1 },
-                        { ...defaultFile, ext: EXT_2 },
-                    ],
-                },
-                oldEntity: { list: [{ ...defaultFile, ext: EXT_1 }] },
-                newValue: EXT_2,
-                oldValue: void 0,
-            });
-            expect(onSizeChange).toHaveBeenCalledWith({
-                fieldPaths: ['list', '1', 'size'],
-                newEntity: {
-                    list: [
-                        { ...defaultFile, ext: EXT_1 },
-                        { ...defaultFile, ext: EXT_2 },
-                    ],
-                },
-                oldEntity: { list: [{ ...defaultFile, ext: EXT_1 }] },
-                newValue: 0,
-                oldValue: void 0,
-            });
-            act(() => {
-                setEntity({
-                    nestedList: [],
-                });
-            });
-            expect(onExtChange).toHaveBeenCalledTimes(3);
-            expect(onSizeChange).toHaveBeenCalledTimes(2);
-            act(() => {
-                setEntity(() => {
-                    return {
-                        list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
-                    };
-                });
-            });
-            expect(onExtChange).toHaveBeenCalledTimes(6);
-            expect(onSizeChange).toHaveBeenCalledTimes(3);
-            expect(onExtChange).toHaveBeenNthCalledWith(4, {
-                fieldPaths: ['list', '0', 'ext'],
-                newEntity: {
-                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
-                },
-                oldEntity: {
-                    list: [
-                        { ...defaultFile, ext: EXT_1 },
-                        { ...defaultFile, ext: EXT_2 },
-                    ],
-                    nestedList: [],
-                },
-                newValue: EXT_2,
-                oldValue: EXT_1,
-            });
-            expect(onExtChange).toHaveBeenNthCalledWith(5, {
-                fieldPaths: ['list', '1', 'ext'],
-                newEntity: {
-                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
-                },
-                oldEntity: {
-                    list: [
-                        { ...defaultFile, ext: EXT_1 },
-                        { ...defaultFile, ext: EXT_2 },
-                    ],
-                    nestedList: [],
-                },
-                newValue: EXT_1,
-                oldValue: EXT_2,
-            });
-            expect(onExtChange).toHaveBeenNthCalledWith(6, {
-                fieldPaths: ['list', '2', 'ext'],
-                newEntity: {
-                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
-                },
-                oldEntity: {
-                    list: [
-                        { ...defaultFile, ext: EXT_1 },
-                        { ...defaultFile, ext: EXT_2 },
-                    ],
-                    nestedList: [],
-                },
-                newValue: '',
-                oldValue: void 0,
-            });
-            expect(onSizeChange).toHaveBeenCalledWith({
-                fieldPaths: ['list', '2', 'size'],
-                newEntity: {
-                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
-                },
-                oldEntity: {
-                    list: [
-                        { ...defaultFile, ext: EXT_1 },
-                        { ...defaultFile, ext: EXT_2 },
-                    ],
-                    nestedList: [],
-                },
-                newValue: 0,
-                oldValue: void 0,
-            });
-            act(() => {
-                setEntity(() => {
-                    return {};
-                });
-            });
-            expect(onExtChange).toHaveBeenCalledTimes(9);
-            expect(onSizeChange).toHaveBeenCalledTimes(6);
-            expect(onExtChange).toHaveBeenNthCalledWith(7, {
-                fieldPaths: ['list', '0', 'ext'],
-                newEntity: {},
-                oldEntity: {
-                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
-                },
-                newValue: void 0,
-                oldValue: EXT_2,
-            });
-            expect(onExtChange).toHaveBeenNthCalledWith(8, {
-                fieldPaths: ['list', '1', 'ext'],
-                newEntity: {},
-                oldEntity: {
-                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
-                },
-                newValue: void 0,
-                oldValue: EXT_1,
-            });
-            expect(onExtChange).toHaveBeenNthCalledWith(9, {
-                fieldPaths: ['list', '2', 'ext'],
-                newEntity: {},
-                oldEntity: {
-                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
-                },
-                newValue: void 0,
-                oldValue: '',
-            });
-            expect(onSizeChange).toHaveBeenNthCalledWith(4, {
-                fieldPaths: ['list', '0', 'size'],
-                newEntity: {},
-                oldEntity: {
-                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
-                },
-                newValue: void 0,
-                oldValue: 0,
-            });
-            expect(onSizeChange).toHaveBeenNthCalledWith(5, {
-                fieldPaths: ['list', '1', 'size'],
-                newEntity: {},
-                oldEntity: {
-                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
-                },
-                newValue: void 0,
-                oldValue: 0,
-            });
-            expect(onSizeChange).toHaveBeenNthCalledWith(6, {
-                fieldPaths: ['list', '2', 'size'],
-                newEntity: {},
-                oldEntity: {
-                    list: [{ ...defaultFile, ext: EXT_2 }, { ...defaultFile, ext: EXT_1 }, defaultFile],
-                },
-                newValue: void 0,
-                oldValue: 0,
-            });
-        });
-        test('`options.watch` should work with field path of array length', () => {
-            const onEntityLengthChange = jest.fn();
-            const onListLengthChange = jest.fn();
-            const lengthUseCase = () => {
-                return entityUseCase();
-            };
-            const { result } = renderHook(() => {
-                return useUseCase([], lengthUseCase, {
-                    watch: {
-                        length: onEntityLengthChange,
-                        'list.length': onListLengthChange,
-                    },
-                });
-            });
-            const { current: cores } = result;
-            const [, { setEntity }] = cores;
-            expect(onEntityLengthChange).toHaveBeenCalledTimes(0);
-            expect(onListLengthChange).toHaveBeenCalledTimes(0);
-            act(() => {
-                setEntity([{ list: [defaultFile, defaultFile] }]);
-            });
-            expect(onEntityLengthChange).toHaveBeenCalledTimes(1);
-            expect(onListLengthChange).toHaveBeenCalledTimes(1);
-            expect(onEntityLengthChange).toHaveBeenCalledWith({
-                fieldPaths: ['length'],
-                newEntity: [{ list: [defaultFile, defaultFile] }],
-                oldEntity: [],
-                newValue: 1,
-                oldValue: 0,
-            });
-            expect(onListLengthChange).toHaveBeenCalledWith({
-                fieldPaths: ['0', 'list', 'length'],
-                newEntity: [{ list: [defaultFile, defaultFile] }],
-                oldEntity: [],
-                newValue: 2,
-                oldValue: void 0,
-            });
-        });
-        test('`options.watch` should work with field path of nested array', () => {
-            const onChange = jest.fn();
-            const { result } = renderHook(() => {
-                return useUseCase({}, fieldPathUseCase, {
-                    watch: {
-                        'nestedList.size': onChange,
-                    },
-                });
-            });
-            const { current: cores } = result;
-            const [, { setEntity }] = cores;
-            expect(onChange).toHaveBeenCalledTimes(0);
-            act(() => {
-                setEntity({ nestedList: [[[defaultFile]]] });
-            });
-            expect(onChange).toHaveBeenCalledTimes(1);
-            expect(onChange).toHaveBeenCalledWith({
-                fieldPaths: ['nestedList', '0', '0', '0', 'size'],
-                newEntity: { nestedList: [[[defaultFile]]] },
-                oldEntity: {},
-                newValue: 0,
-                oldValue: void 0,
-            });
-            act(() => {
-                setEntity({
-                    nestedList: [
-                        [
-                            [
-                                { ...defaultFile, size: 100 },
-                                { ...defaultFile, size: 200 },
-                            ],
-                        ],
-                        [[{ ...defaultFile, size: 300 }]],
-                    ],
-                });
-            });
-            expect(onChange).toHaveBeenCalledTimes(4);
-            expect(onChange).toHaveBeenNthCalledWith(2, {
-                fieldPaths: ['nestedList', '0', '0', '0', 'size'],
-                newEntity: {
-                    nestedList: [
-                        [
-                            [
-                                { ...defaultFile, size: 100 },
-                                { ...defaultFile, size: 200 },
-                            ],
-                        ],
-                        [[{ ...defaultFile, size: 300 }]],
-                    ],
-                },
-                oldEntity: { nestedList: [[[defaultFile]]] },
-                newValue: 100,
-                oldValue: 0,
-            });
-            expect(onChange).toHaveBeenNthCalledWith(3, {
-                fieldPaths: ['nestedList', '0', '0', '1', 'size'],
-                newEntity: {
-                    nestedList: [
-                        [
-                            [
-                                { ...defaultFile, size: 100 },
-                                { ...defaultFile, size: 200 },
-                            ],
-                        ],
-                        [[{ ...defaultFile, size: 300 }]],
-                    ],
-                },
-                oldEntity: { nestedList: [[[defaultFile]]] },
-                newValue: 200,
-                oldValue: void 0,
-            });
-            expect(onChange).toHaveBeenNthCalledWith(4, {
-                fieldPaths: ['nestedList', '1', '0', '0', 'size'],
-                newEntity: {
-                    nestedList: [
-                        [
-                            [
-                                { ...defaultFile, size: 100 },
-                                { ...defaultFile, size: 200 },
-                            ],
-                        ],
-                        [[{ ...defaultFile, size: 300 }]],
-                    ],
-                },
-                oldEntity: { nestedList: [[[defaultFile]]] },
-                newValue: 300,
-                oldValue: void 0,
-            });
-        });
-        test('`options.watch` should work with field path of object', () => {
-            const onExtChange = jest.fn();
-            const onSizeChange = jest.fn();
+        test(`should call latest functions of usecase options even deps has not change`, () => {
+            const onPathChange1 = jest.fn();
+            const onPathChange2 = jest.fn();
+            let onPathChange = onPathChange1;
             const { result } = renderHook(() => {
-                return useUseCase({}, fieldPathUseCase, {
-                    watch: {
-                        'obj.file.ext': onExtChange,
-                        'obj.file.size': onSizeChange,
-                    },
-                });
+                return useUseCase(defaultFile, fileUseCase, { onPathChange });
             });
-            const { current: cores } = result;
-            const [, { setEntity }] = cores;
-            expect(onExtChange).toHaveBeenCalledTimes(0);
+            const { current: context } = result;
+            const [, { setPath }] = context;
             act(() => {
-                setEntity({
-                    obj: {
-                        file: {
-                            ext: EXT_1,
-                        },
-                    },
-                });
-            });
-            expect(onExtChange).toHaveBeenCalledTimes(1);
-            expect(onSizeChange).toHaveBeenCalledTimes(0);
-            expect(onExtChange).toHaveBeenCalledWith({
-                fieldPaths: ['obj', 'file', 'ext'],
-                newEntity: {
-                    obj: {
-                        file: {
-                            ext: EXT_1,
-                        },
-                    },
-                },
-                oldEntity: {},
-                newValue: EXT_1,
-                oldValue: void 0,
+                setPath(PATH_1);
+                onPathChange = onPathChange2;
             });
+            expect(onPathChange1).toHaveBeenCalledTimes(1);
+            expect(onPathChange2).toHaveBeenCalledTimes(0);
+            expect(onPathChange1).toHaveBeenLastCalledWith(PATH_1, '');
             act(() => {
-                setEntity(() => {
-                    return {};
-                });
-            });
-            expect(onExtChange).toHaveBeenCalledTimes(2);
-            expect(onSizeChange).toHaveBeenCalledTimes(0);
-            expect(onExtChange).toHaveBeenCalledWith({
-                fieldPaths: ['obj', 'file', 'ext'],
-                newEntity: {},
-                oldEntity: {
-                    obj: {
-                        file: {
-                            ext: EXT_1,
-                        },
-                    },
-                },
-                newValue: void 0,
-                oldValue: EXT_1,
+                setPath(PATH_2);
             });
+            expect(onPathChange1).toHaveBeenCalledTimes(1);
+            expect(onPathChange2).toHaveBeenCalledTimes(1);
+            expect(onPathChange2).toHaveBeenLastCalledWith(PATH_2, PATH_1);
         });
         test('multiple `Provider` should work', () => {
             const onNumberMount = jest.fn();
@@ -1114,7 +595,7 @@ describe('useUseCase', () => {
         });
     });
     describe('`useUseCase` should work the same as `ModeCoreCollectionHook`', () => {
-        test.each([UseCaseModes.Normal, UseCaseModes.Stateless])('check context type', (mode) => {
+        test.each([UseCaseModes.Normal, UseCaseModes.Stateless])('[mode=%s]: check context type', (mode) => {
             const { result } = renderHook(() => {
                 return useUseCase(defaultFile, fileUseCase, mode);
             });
@@ -1323,47 +804,6 @@ describe('useUseCase', () => {
             fireEvent.click(screen.getByText(updateButtonText));
             expect(addReducer).toHaveBeenCalledTimes(3);
         });
-        test('`options.onChange` event should be trigger at child elements', () => {
-            const onFirstChange = jest.fn();
-            const onSecondChange = jest.fn();
-            const onParentPathChange = jest.fn();
-            const firstButtonText = 'first button';
-            const secondButtonText = 'second button';
-            let onChange = onFirstChange;
-            const A = () => {
-                useUseCase(fileUseCase, { onChange });
-                return _jsx(Fragment, {});
-            };
-            const B = () => {
-                const [, { setPath }, Provider] = useUseCase(defaultFile, fileUseCase, {
-                    onChange: onParentPathChange,
-                });
-                const onFirstClick = () => {
-                    setPath(PATH_1);
-                    onChange = onSecondChange;
-                };
-                const onSecondClick = () => {
-                    setPath('');
-                };
-                return (_jsxs(Provider, { children: [_jsx(A, {}), _jsx("button", { onClick: onFirstClick, children: firstButtonText }), _jsx("button", { onClick: onSecondClick, children: secondButtonText })] }));
-            };
-            render(_jsx(B, {}));
-            expect(onFirstChange).toHaveBeenCalledTimes(0);
-            fireEvent.click(screen.getByText(firstButtonText));
-            expect(onFirstChange).toHaveBeenCalledTimes(1);
-            expect(onFirstChange).toHaveBeenLastCalledWith({ ...defaultFile, ext: EXT_1, path: PATH_1 }, defaultFile);
-            expect(onParentPathChange).toHaveBeenCalledTimes(1);
-            expect(onSecondChange).toHaveBeenCalledTimes(0);
-            fireEvent.click(screen.getByText(secondButtonText));
-            expect(onSecondChange).toHaveBeenCalledTimes(1);
-            expect(onSecondChange).toHaveBeenLastCalledWith(defaultFile, {
-                ...defaultFile,
-                ext: EXT_1,
-                path: PATH_1,
-            });
-            expect(onFirstChange).toHaveBeenCalledTimes(1);
-            expect(onParentPathChange).toHaveBeenCalledTimes(2);
-        });
         test('`options.onChange` event should be trigger in orders', () => {
             let changeTimes = 0;
             const updateChangeTimes = () => {
@@ -1397,6 +837,48 @@ describe('useUseCase', () => {
             expect(onChangeB).toHaveReturnedWith(1);
             expect(onChangeC).toHaveReturnedWith(3);
         });
+        test.each([UseCaseModes.Normal, UseCaseModes.Stateless])('[mode=%s]: `options.onChange` should always trigger the latest one in child components', (mode) => {
+            const onFirstChange = jest.fn();
+            const onSecondChange = jest.fn();
+            let onChange = onFirstChange;
+            const firstButtonText = 'first button';
+            const secondButtonText = 'second button';
+            const A = () => {
+                const [, { setPath }] = useUseCase(fileUseCase, {
+                    onChange,
+                });
+                const onFirstClick = () => {
+                    setPath(PATH_1);
+                    onChange = onSecondChange;
+                };
+                const onSecondClick = () => {
+                    setPath('');
+                };
+                return (_jsxs(Fragment, { children: [_jsx("button", { onClick: onFirstClick, children: firstButtonText }), _jsx("button", { onClick: onSecondClick, children: secondButtonText })] }));
+            };
+            const B = () => {
+                const [file, setFile] = useState(defaultFile);
+                const [, , Provider] = useUseCase(file, fileUseCase, mode, {
+                    onChange(newFile) {
+                        if ((mode & UseCaseModes.Stateless) !== UseCaseModes.Stateless) {
+                            return;
+                        }
+                        // `stateless` 不会保存状态，所以需要手动保存
+                        setFile(newFile);
+                    },
+                });
+                return (_jsx(Provider, { children: _jsx(A, {}) }));
+            };
+            render(_jsx(B, {}));
+            expect(onFirstChange).toHaveBeenCalledTimes(0);
+            fireEvent.click(screen.getByText(firstButtonText));
+            expect(onFirstChange).toHaveBeenCalledTimes(1);
+            expect(onSecondChange).toHaveBeenCalledTimes(0);
+            fireEvent.click(screen.getByText(secondButtonText));
+            expect(onFirstChange).toHaveBeenCalledTimes(1);
+            expect(onSecondChange).toHaveBeenCalledTimes(1);
+            expect(onSecondChange).toHaveBeenLastCalledWith(defaultFile, { ...defaultFile, ext: EXT_1, path: PATH_1 });
+        });
     });
     describe('`useUseCase` should work the same as `useReducers`', () => {
         test('`entity` should equal `defaultFile`', () => {