How to test that a element is not in the screen while a http request is made?

Question

I have an application using React and axios, and I want to this the following behvior:

1. Fill a form
2. submit form
3. Success message shows
4. Fill the form again
5. submit form
6. While the request is made, the success message should not be showing**
7. request finish, success message shows again

**the problem is to test this step (6)

I'm using axios-mock-adapter to mock axios. I tried the following approach:

axiosMock
.onPost('/api/auth/alteracaoSenha').replyOnce(204)
.onPost('/api/auth/alteracaoSenha').replyOnce(() => {
   expect(screen.queryByText('Success message')).not.toBeInTheDocument()
   return [204]
  })

When I try this, it works fine. But, if I remove the code that reset the success message to see if the test broke, the test continues to pass. What I found is that the expect throws an error, but the axios mock catch this error and just return it to the API :/ So the expect line that should file, did not break the test.

Is there any other option to do that test?