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

Question

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

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.signin）; 我看到了模拟功能本身。

Answer 1

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

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