使用酶反应测试结构

Question

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 I'm 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()

Here's 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 remove <LoginSignupSliderButton toShow={(val: boolean) => this.toLogInOrSignUp(val)} /> from the component and test.

I'm suspecting because of the callback?

Answer 1

What you need is snapshot testing like so:

// yourcomp.test.js

import YourComp from './wherever-it-lives';


it('renders correctly', () => {
    const wrapper = shallow(<YourComp/>);
    expect(wrapper).toMatchSnapshot();
});

After this test passes, it will create a __snapshots__ folder in your project directory with the correct snapshot for your components markup.

NOTE: If you ever update your markup (HTML) again, this test will fail until you update your snapshot like so:

jest --updateSnapshot

And your test should be passing again.

PS. I have of course made an assumption you are using jest as your test runner.