当函数作为prop传递时调用带有酶的函数-React [英] Invoke a function with enzyme when function is passed down as prop - React

问题描述

我有一个说 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&&返回登录} 
 hideBackArrowCloseButton = {hideBackArrowCloseButton} 
 isPrimaryCloseButtonRequired> 
 
< div className = {cx（'signInSliderPanel'）}> 
 
< div className = {cx（'loginSlider'）}}> 
 {！showCreateAccountPage&！showWelcomePage&&！showForgotPasswordPage&& 
< LoginWrapper 
 signInDetails = {signInDetails} 
 deviceType = {deviceType} 
 preferences = {preferences} 
条消息ts = {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} 
 createAccountActions = {this.props.createAccountActions} 
操作= {this.props.passwordResetActions} 
 passwordResetDetails = {passwordResetDetails} 
 signInSliderActions = {this.props.signInSliderActions} 
 onPrimaryCloseButtonClick = {this.onPrimaryCloseButtonClick} 
设备类型
 />}< / div> 
< div className = {cx（’welcomeSlider’）}> 
 {showWelcomePage&& 
<欢迎
 messagesTexts = {messagesTexts.signInSlider} 
 firstName = {firstName} />}< / div> 
< / div> 
< / SlidePanel> 
）; 
  

覆盖范围：

解决方案

您可以尝试以下操作：

< pre class = snippet-code-js lang-js prettyprint-override> const组件=浅（< YourComponent />）; component.find（'LoginWrapper'）。prop（'onClickOfCreateAccountButton' ）（）;

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

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:

解决方案

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.

这篇关于当函数作为prop传递时调用带有酶的函数-React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！