当函数作为 prop 传递时调用带有酶的函数 - React

Question

我有一个函数 onClickOfCreateAccountButton，它是在单击按钮时从我的子组件调用的，但逻辑是在父组件中编写的。

如何模拟？

我的代码：

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

覆盖范围：

Answer 1

你可以试试这个：

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

这将调用您的 onClickOfCreateAccountButton 函数，然后您可以使用 expect 来测试结果。

当函数作为 prop 传递时调用带有酶的函数 - React

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

reactjs

testing

enzyme

chai-enzyme