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