使用 Mocha 進行單元測試，使用 React Hooks + Redux 的功能組件中的酶調度函數

Question

我正在嘗試測試來自“mapDispatchToProps”的調度，該調度使用使用 useEffect() 鈎子的功能組件定義，並且在那里調用了 function。

export const MyComponent = (props) => {
    useEffect(() => {
        // Anything in here is fired on component mount.
        props.registerInStore(props.id, false);
        return () => {
            // Anything in here is fired on component unmount.
            props.resetInStore(props.id);
        };
    }, []);

    const handleOnClick = () => {
        props.toggle(props.id);
    };

    return (
        <div >
            {!props.isOpen ? (
                <button
                    onClick={handleOnClick}>
                   Open
                </button>
            ) : (
                <button
                    onClick={handleOnClick}>
                   close
                </button>
            )}
        </div>
    );
};


const mapDispatchToProps = (dispatch) => ({
    registerInStore(id, isOpen) {
        dispatch(registerInStore(id, isOpen));
    },
    resetInStore(id) {
        dispatch(resetInStore(id));
    }
});

export default connect(null, mapDispatchToProps)(MyComponent);

在我使用 Mocha 和酶的單元測試中，我還想測試“mapDispatchToProps”中的調度，我在下面所做的似乎不起作用：

describe('<MyComponent/>', () => {
    let store = mockStore({
                toggles: [
                {
                    id: 10,
                    isOpen: true
                }
            ]
        }
    });
    const options = {
        context: {store},
        childContextTypes: {store: PropTypes.object.isRequired},
        lifecycleExperimental: true
    };
    const setup = (inputProps = {}) => {
        const props = {
            id: 10,
            isOpen: false,
            registerInStore: expect.createSpy(),
            resetInStore: expect.createSpy(),
            toggle: expect.createSpy(),
            ...inputProps
        };
        const wrapper = mount(<MyComponent {...props} />, options);
        return {
            props,
            wrapper
        };
    };

    afterEach(() => {
        expect.restoreSpies();
    });

       it('should dispatch', async () => {
            const {wrapper}=setup();
            await store.dispatch(wrapper.prop('registerInStore')(10,false));

            /* i tried the commented way too instead of directly dispatching*/
            // wrapper.prop('registerInStore')(10,false);
            //await new Promise((resolve) => setTimeout(resolve, 50));

            const expectedActions = [{type: 'REGISTER_IN_STORE', id: 10, isOpen: false}];
            expect(store.getActions()).toEqual(expectedActions);
           
        });

store.getActions() 返回一個空數組，我是 React Hooks 和測試的新手，我做錯了什么，還有其他解決方案嗎？ 提前致謝。

Answer 1

通過移除間諜來工作，例如：-

  const setup = (inputProps = {}) => {
        const props = {
            id: 10,
            isOpen: false,
            registerInStore:()=>null,
            resetInStore: ()=>null,
            toggle: ()=>null,
            ...inputProps
        };
        const wrapper = mount(<MyComponent {...props} />, options);
        return {
            props,
            wrapper
        };
    };