reactjs - Unit Testing with Mocha,Enzyme dispatched functions in functional components which uses React Hooks + Redux

Question

I am trying to test a dispatch from 'mapDispatchToProps' defined with a functional component which uses useEffect() hook and the function is called there.

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);

In my unit tests with Mocha and enzyme i also want to test the dispatches inside 'mapDispatchToProps', what i did below does not seem to work :

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);
           
        });

the store.getActions() is returning an empty array, i am new to React Hooks and testing, what am i doing wrong, any other solutions?. Thanks in Advance.

question from:https://stackoverflow.com/questions/66066633/unit-testing-with-mocha-enzyme-dispatched-functions-in-functional-components-whi

Answer 1

worked by removing the spies e.g:-

  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
        };
    };