How to test a scroll value of element for specific position?

[someApprentice]

I want to test in my chat application that an element is scrolled down to the bottom on the first load and keeps scrolled down on new messages. I'm scrolling down using the following code snippet:

messagesElement.scrollTop = messagesElement.scrollHeight - messagesElement.offsetHeight;

I've managed to test that the element is scrolled down on the first load with following code:

cy.mount(
  <Provider store={ store }>
    <App />
  </Provider>
);

cy.get('.message').its('length').should('eq', 20);

cy.get('.messages').then(el => {
  let e  = el.get(0);

  expect(e.scrollTop).to.eq(e.scrollHeight - e.offsetHeight);
});

But the second test with keeping element at the bottom sometimes fails. I'm using the following code:

cy.mount(
  <Provider store={ store }>
    <App />
  </Provider>
);

cy.get('.message').its('length').should('eq', 20);

let message: Message = {
  id: nanoid(),
  dialog: dialog.id,
  author: user.id,
  date: Math.floor((new Date()).getTime() / 1000),
  content: "Lorem ipsum dolor sit amet"
} as Message;

cy.window().its('store').invoke('dispatch', pushMessage(message));

cy.get('.messages').should('contain', message.content);

cy.wait(1000);

cy.get('.messages').then(el => {
  let e  = el.get(0);

  expect(e.scrollTop).to.eq(e.scrollHeight - e.offsetHeight);
});

As I understand it, cypress needs time to scroll the element down, but sometimes it doesn’t even enough 3 seconds to scroll down, and I don’t know how to write the test correctly. Also, using wait(...) method seems undoubtedly wrong.

How can I write such a test?

*In the second video, in which the test fails, if you look closely, you can see how the element did not scroll to the very bottom.

DialogHOC.cy.tsx.pass.1sec.mp4

DialogHOC.cy.tsx.fail.mp4