Testing a form in react not using redux-form but normal react-redux and checking state giving problems

Question

I am using react with typescript here is the login form very simple one

import React, { ChangeEvent, FormEvent, useRef, useState } from 'react';
import { Typography, Button, Icon } from '@material-ui/core';
import { useSpring, animated } from 'react-spring';
import { connect } from 'react-redux';

import { setUsername } from '../../../action/user';
import LoginPropType from './LoginPropType';
import './Login.scss';

const Login: React.FC<LoginPropType> = (props) => {
    const inp = useRef<HTMLInputElement>(null);
    const [username, setUsername] = useState<string | null>(null);
    const effect = useSpring({
        from: { opacity: 0, marginLeft: -3000 },
        to: {
            opacity: 1,
            marginLeft: 0,
        },
    });

    const removeSpaces = (e: ChangeEvent<HTMLInputElement>) => {
        let val = e.target.value;
        val = val.replace(/s/g, '');
        if (inp.current) {
            inp.current.value = val || '';
        }
        setUsername(val);
    };

    const submit = (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        if (username) {
            if (username.length > 0) props.setUsername(username);
        } else {
            console.log('not working');
        }
    };

    return (
        <animated.div
            style={effect}
            className="component-login"
            data-test="component-login"
        >
            <Typography color="textPrimary" classes={{ root: 'login-title' }}>
                Your Name
            </Typography>
            <form className="inputs" onSubmit={submit}>
                <input
                    className="login-input"
                    type="text"
                    data-test="login-input"
                    onChange={removeSpaces}
                    ref={inp}
                ></input>
                <Button
                    variant="contained"
                    color="secondary"
                    type="submit"
                    data-test="login-button"
                >
                    <Icon
                        classes={{ root: 'login-icon' }}
                        className="fa fa-terminal"
                    />
                </Button>
            </form>
        </animated.div>
    );
};

export default connect(null, { setUsername })(Login);

Now i am doing integration test

Setup

import { shallow, ShallowWrapper } from 'enzyme';
import { Store } from 'redux';

import Login from '../../components/HomePage/Login';
import getElementByAttr from '../utils/getElementByAttr';
import storeFactory from '../utils/storeFactory';

let store: Store;

const setup = (initialState: object) => {
    store = storeFactory(initialState);
    const wrapper = shallow(<Login store={store} />)
        .dive()
        .dive();
    return wrapper;
};

actual test

    test('with a spaced input', () => {
        const wrapper = setup({});
        const input = getElementByAttr(wrapper, 'login-input');
        const loginButton = getElementByAttr(wrapper, 'login-button');
        input.simulate('change', { target: { value: 'Athh b1' } });
        wrapper
            .find('form')
            .simulate('submit', { preventDefault: () => {} });
        console.log(store.getState());
        const username = store.getState().username;
        expect(username).toBe('Athhb1');
    });

Here is the actual output

[Please click here to open][1] [1]: https://i.stack.imgur.com/A9txI.png

The react app as doing ass i expect but why are tests failing can someone help!! I am new to testing! I don't want to use redux-form here coz it is a trivial task! Thanks a lot

The information below this about redux reducers and action creator just putting it out there

Reducer (It is trivial)

import { AnyAction } from 'redux';
import actionTypes from '../action/types';

let initialState: string | null = null;
if (sessionStorage.getItem('username') !== null) {
    initialState = sessionStorage.getItem('username');
}

const userReducer = (state = initialState, action: AnyAction) => {
    switch (action.type) {
        case actionTypes.SET_USERNAME:
            sessionStorage.setItem('username', action.username);
            return action.username;
        default:
            return state;
    }
};

export default userReducer;

Action creator

import actionTypes from './types';

export const setUsername = (username: string) => {
    return {
        type: actionTypes.SET_USERNAME,
        username: username,
    };
};

Answer 1

等待大神答复