Question

你好，我有一个我想测试结构的react组件。

所以当我运行wrapper.debug()时，它会向我显示这样的输出。

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

然后即时测试：

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

这里是我的组件渲染方法：

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

如果我从组件中移除<LoginSignupSliderButton toShow={(val: boolean) => this.toLogInOrSignUp(val)} />并进行测试，我的测试就可以正常工作。

我怀疑是因为callbacK吗？

Answer 1

您需要的是snapshot testing，如下所示：

// yourcomp.test.js

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


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

此测试通过后，它将在项目目录中创建一个__snapshots__文件夹，并为您的组件标记提供正确的快照。

注意：如果再次更新标记（HTML），则该测试将失败，直到您像这样更新快照为止：

jest --updateSnapshot

您的测试应该再次通过。

PS。我当然已经假设您使用笑话作为测试跑步者。

使用酶反应测试结构

1 个答案: