Invoke a function with enzyme when function is passed down as prop - React

问题

I have a function say onClickOfCreateAccountButton which is being called from my Child Component on click of a button but the logic is written in the Parent Component.

How do I simulate it?

My code:

    onClickOfCreateAccountButton() {
    const el = document.getElementsByClassName('SignInSlider-loginSlider')[0];
    const el1 = document.getElementsByClassName('SignInSlider-createAccountSlider')[0];

    el.classList.add('SignInSlider-animate-show');
    el.classList.remove('SignInSlider-animate-hide');
    setTimeout(() => {
        this.props.signInSliderActions.openCreateAccountPage();
        el1.classList.add('SignInSlider-animate-show');
    }, 5);
}


return (
        <SlidePanel
            isOpenPanel={this.props.isOpenPanel}
            onClosePanel={!hideBackArrowCloseButton && this.onBackButtonClick}
            onPrimaryCloseButtonClick={this.onPrimaryCloseButtonClick}
            panelTitle={!hideBackArrowCloseButton && 'Back to Sign-In'}
            hideBackArrowCloseButton={hideBackArrowCloseButton}
            isPrimaryCloseButtonRequired>

            <div className={cx('signInSliderPanel')}>

                <div className={cx('loginSlider')}>
                    { !showCreateAccountPage && !showWelcomePage && !showForgotPasswordPage &&
                    <LoginWrapper
                        signInDetails={signInDetails}
                        deviceType={deviceType}
                        preferences={preferences}
                        messagesTexts={messagesTexts}
                        source="account"
                        actions={this.props.signInActions}
                        onClickOfCreateAccountButton={this.onClickOfCreateAccountButton}
                        onClickPasswordReset={this.onClickPasswordReset}
                        isSignInSliderReq
                    /> }
                </div>

                <div className={cx('createAccountSlider')}>
                    {showCreateAccountPage &&
                    <CreateAccountWrapper
                        createAccount={createAccount}
                        isSignInSliderReq
                        deviceType={deviceType}
                        messagesTexts={this.props.messagesTexts}
                        preferences={this.props.preferences}
                        actions={this.props.createAccountActions}/> } </div>
                <div className={cx('passwordSlider')}>
                    {showForgotPasswordPage &&
                    <PasswordResetWrapper
                        isSignInSliderReq
                        messagesTexts={messagesTexts.passwordReset}
                        preferences={preferences}
                        createAccountActions={this.props.createAccountActions}
                        actions={this.props.passwordResetActions}
                        passwordResetDetails={passwordResetDetails}
                        signInSliderActions={this.props.signInSliderActions}
                        onPrimaryCloseButtonClick={this.onPrimaryCloseButtonClick}
                        deviceType
           />} </div>
                <div className={cx('welcomeSlider')}>
                    { showWelcomePage &&
                    <Welcome
                        messagesTexts={messagesTexts.signInSlider}
                        firstName={firstName} />} </div>
            </div>
        </SlidePanel>
    );

Coverage:

回答1:

You can try this:

const component = shallow(<YourComponent /> );
component.find('LoginWrapper').prop('onClickOfCreateAccountButton')();

This will call your onClickOfCreateAccountButton function and then you can use expect to test result.

来源：https://stackoverflow.com/questions/49064334/invoke-a-function-with-enzyme-when-function-is-passed-down-as-prop-react