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（＆＃39; THERE ----＆＃39;，this.props.signin）;我看到了模拟功能本身。

Answer 1

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

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

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

1 个答案: