dimanche 18 octobre 2020

React testing structure using enzyme

Hello I have a react component that I want to test the structure.

so when I run wrapper.debug() it shows me an output like this.

<Fragment>
  <div className="SignupLoginContainer">
    <div className="SignupLoginContainer__SliderBtnContainer">
      <LoginSignupSliderButton toShow={[Function: toShow]} />
    </div>
    <div className="SignupLoginContainer__Form_Container">
       <Login isLoggingInOrSigningUp={true} />
     </div>
    </div>
</Fragment>

then im testing it like:

expect(wrapper.matchesElement(
  <Fragment>
   <div className="SignupLoginContainer">
     <div className="SignupLoginContainer__SliderBtnContainer">
      <LoginSignupSliderButton toShow={() => true} />
     </div>
      <div className="SignupLoginContainer__Form_Container">
        <Login isLoggingInOrSigningUp={true} />
      </div>
       </div>
  </Fragment>
    )).toBeTrue()

Heres my component render method:

render() {
    return (
      <Fragment>
          <div className={styles.SignupLoginContainer}>
            <div className={styles.SignupLoginContainer__SliderBtnContainer}>
              <LoginSignupSliderButton toShow={(val: boolean) => this.toLogInOrSignUp(val)} />
            </div>
            <div className={styles.SignupLoginContainer__Form_Container}>
              <Login isLoggingInOrSigningUp={this.state.toLoginOrSignup} />
            </div>
          </div>
      </Fragment>
    );
  }
}

My test works if i removed <LoginSignupSliderButton toShow={(val: boolean) => this.toLogInOrSignUp(val)} /> from the component and test.

I'm suspecting because of the callbacK?

Aucun commentaire:

Enregistrer un commentaire