Проверка состояния и событий в компоненте ReactJs с помощью Jest и Enzyme

Question

У меня есть компонент с отслеживанием состояния, который отправляет действие и получает состояние от избыточного числа, как показано ниже:

const mapStateToProps = state => {
    return {
        status: state.signUpReducer.status,
        message: state.signUpReducer.message
    }
}

const mapDispatchToProps = dispatch => {
    return {
        sign_up_start: credentials => dispatch( sign_up_start(credentials) ),
    }
}

Состояние компонента выглядит следующим образом:

state = {
    formIsValid: false,
    formControls: {
        email: {
            value: "",
            valid: false,
            validationRules: {
                isEmail: true,
                isRequired: true
            },
            placeholderText: "Email Address",
            touched: false
        },
        password: {
            value: "",
            valid: false,
            touched: false,
            validationRules: {
                isRequired: true,
            },
            placeholderText: "Password"
        }
    }
};

Я использую локальное состояние для обработки события onChange формы.

render () {
    return (
        <div>
            <Header />

            <div className={styles.signUpContainer}>
                <div className={styles.signUp}>SIGN UP</div>

                <div className={styles.signUpForm}>

                    <CustomInput type="email" name="email" 
                          placeholder={this.state.formControls.email.placeholderText}
                          value={this.state.formControls.email.value}
                          onChange={this.inputChangeHandler}
                          valid={this.state.formControls.email.valid.toString()}
                          touched={this.state.formControls.email.touched.toString()}
                    />


                    <CustomInput type="password" name="password" 
                          placeholder={this.state.formControls.password.placeholderText}
                          value={this.state.formControls.password.value}
                          onChange={this.inputChangeHandler}
                          valid={this.state.formControls.password.valid.toString()}
                          touched={this.state.formControls.password.touched.toString()}
                    />

                    <Button onClick={this.formSubmitHandler} disabled={!this.state.formIsValid}>CREATE MY ACCOUNT</Button>


                </div>
            </div>

        </div>
    );
}

Существует пользовательский компонент кнопки, который обрабатывает событие onClick, компонент выглядит следующим образом:

const Button = props => {
    return (
        <button className={styles.button} {...props}>{props.children}</button>
    );
}

При нажатии на компонент <Button /> вызывается метод formSubmitHandler, указанный ниже, обратите внимание, что этот метод используется для родительского метода, а не для компонента Button.

formSubmitHandler = event => {
    event.preventDefault();

    const formData = {};
    for (let formElementId in this.state.formControls) {
        formData[formElementId] = this.state.formControls[formElementId].value
    }

    this.props.sign_up_start(formData);
}

Обработчик формы отправляет sign_up_start, который является дескриптором с избыточностью, который в случае успеха вернет статус пропа 200 или 422, если не удастся, я подключаюсь к componentWillReceiveProps(nextProps) {}, как показано ниже:

redirectOrNotifyOnStatusChange(nextProps) {
    if (nextProps.status === 200) {
        //show success notification
        return this.navigateTo('/auth');
    }
    if ((nextProps.status === 422) || !(nextProps.message === this.props.message)) {
        //show notification
        return window.alert('Opps', nextProps.message);
    }
} 


componentWillReceiveProps(nextProps) {
    this.redirectOrNotifyOnStatusChange(nextProps);
}

Я хочу протестировать этот компонент, как показано ниже:

1. Передать начальный статус реквизита и сообщение от redux, которое, как я знаю, будет пустым в componentDidMount
2. Проверьте, что при нажатии кнопки вызывается метод formSubmitHandler и что метод вызывает this.props.sign_up_start
3. Наблюдайте, когда componentWillReceiveProps, и проверяйте, что, когда nextProps.status равен 200, он перенаправляет на страницу аутентификации
4. Также проверьте, отображается ли всплывающее окно при статусе 422.

Я начал писать тест, как показано ниже:

import React from 'react';
import {mount} from 'enzyme';
import { SignUp } from './SignUp.page';
import Button from '../../components/Button';


describe('<SignUp />', () => {

    it('test formSubmitHandler called props.sign_up_start', () => {

        const props = {
            sign_up_start: jest.fn(),
        }

        const wrapper = mount(<SignUp {...props} />);
        const instance = wrapper.instance();

        jest.spyOn(instance, 'formSubmitHandler');
        wrapper.find(Button).simulate('click');
        expect(instance.formSubmitHandler).toHaveBeenCalled();

        // expect(props.sign_up_start).toHaveBeenCalled();

    });

});

Но даже вышеперечисленное не работает. Пожалуйста, это правильные требования для тестирования этого кода или есть лучший способ, Пожалуйста, помогите мне написать тест для удовлетворения этих требований. Кажется, я не могу обернуться вокруг этого.

Спасибо, оценили.