Javascript React，Jest：模拟提交表单单元测试

我一直坚持使用简单的测试用例，无法找出它不起作用的原因。 有一个我想测试的组件：

export class SignInForm extends Component {

   onSubmit = (user) => {
       console.log('THERE----', this.props.signin);  // ---> i saw it during testing
       this.props.signin();
   };

   render() {
       return (
           <Form onSubmit={this.onSubmit}>
              {formApi => (
                  <form onSubmit={formApi.submitForm}>
                       <InputFieldGroup field="identifier" label="Username/Email"/>
                       <InputFieldGroup field="password" label="Password" type="password"/>
                       <button type="submit">Submit</button>
                   </form>
               )}
           </Form>
       );
   }

}

这是我的测试用例

it('should render in proper way', () => {

    const signinMock = jest.fn();

    const props = {
        signin: signinMock
    };

    const component = mount(<SignInForm {...props}/>);


    component.find('form').simulate('submit');

    console.log(signinMock.mock.calls); // ---> saw empty array []
});

在本例中，我希望立即调用signinMock。但我看到了调用的空数组，但在启动测试期间，我看到了组件方法的控制台日志：console.log'THERE--'，this.props.sign；我看到了模拟函数本身。

console.log在事件处理程序之前执行，因此您会看到一个空数组。下面的代码将允许执行事件处理程序，然后您可以执行断言

setTimeout(()=> {
    expect(signinMock.mock.calls.length).to.equal(1);
}, 0);

---

谢谢这节省了我的时间。