Testing Library - behavior of passed functions - reactjs

Question

I need to explain behavior of react-testing-library.
I'm trying to test my login page which works fine in browser but I am not able to pass any test.
Currently I am facing two problems:
this.props.anyFunction which is passed from test throws not a function
component is not being re-rendered on state change
Login.test.js:
let __login = render(<Login onLogin={()=>console.log('Im in!')}/>);
// fill some inputs
fireEvent.click(submit);
If user is logged in
I want just to console.log this situation at this moment but Login component throws error this.props.onLogin is not a function even if it is passed.
If user is NOT logged in
In this situation I render message in Login.js:
<div role="alert" className="text-danger px-2 mb-1">
{_(`login.error.${this.state.error}`)}
</div>
which works fine in browser. So I've tried to catch it in Login.test.js:
const alert = await __login.findByRole('alert');
which throws error Unable to find an element with the role "alert". In dump I see whole rendered login page but nothing has changed (component did not re-render after unsucessful try).
Is there anything what I didn't understand well?
Is there any way how to debug state of tested component?
Full code example
As requested I'm providing full code example. May the router or socket.io cause break?
Login.js
class Login extends React.Component
{
constructor(props) {
super(props);
this.state = {email:'', password:'', error:false}
}
componentDidMount() {
// I know this is not best way how to handle authorization, but it's just for now
this.props.io.on('onTokenResponse',(response)=> {
if (response.error) {
this.setState({error:response.error});
return;
}
if (!response.token) {
this.setState({error:'unknown error'});
return;
}
sessionStorage.setItem('token', JSON.stringify(response));
this.props.onLogin();
this.props.history.push('/');
});
}
handleSubmit=(e)=>{
e.preventDefault();
this.props.io.emit('onTokenRequest',{email:this.state.email, password:this.state.password});
};
handleChange=(e)=>
this.setState({[e.target.name]:e.target.value});
Message=()=>
this.state.error && <div role="alert" className="text-danger px-2 mb-1">{_(`login.error.${this.state.error}`)}</div>;
render() {
return (
<section className="login-box mt-5">
{this.Message()}
<form onSubmit={this.handleSubmit}>
{['email','password'].map((e)=>
<input key={e} name={e} type={e} placeholder={e} required="required"
className="form-control mb-2"
value={this.state[e]}
onChange={this.handleChange}/>
)}
<button type="submit" className="btn btn-primary text-capitalize w-100">
{_('login.submit')}
</button>
</form>
</section>
);
}
}
export default withRouter(Login);
Login.test.js
test('renders without crashing', async () =>
{
const ioClient = io.connect(config.webSocketServer);
const onLogin = jest.fn();
let __login = render(
<BrowserRouter>
<Switch>
<Login io={ioClient} onLogin={onLogin}/>
</Switch>
</BrowserRouter>
);
fillAndCheckInput('email','jaxpcze#gmail.com');
fillAndCheckInput('password','wrong');
let submit = __login.getByText('přihlásit');
fireEvent.click(submit);
const alert = await __login.findByRole('alert');
fillAndCheckInput('password','right');
fireEvent.click(submit);
await expect(onLogin).toHaveBeenCalledTimes(1);
function fillAndCheckInput(placeholder,value) {
let __input = __login.getByPlaceholderText(placeholder);
fireEvent.change(__input,{target:{value:value}});
expect(__input.value).toBe(value);
}
});