Multiple different toasts I want to check at same time on my page, but my Cypress E2E test only fails on the one it sees first

I am using Cypress to check pop up toast messages. I normally just have 1 single toast, that I can catch and compare with no issues, but when I have multiple toasts at the same time, that are not repeats, but instead each their own message, my test catches only the first one and fails.

example for single toast:

Cypress.Commands.add('lookAtToast', (message) => {
  cy.get('.messenger-message-inner').eq(0).should('contain.text', message);
}); 

Can anyone help me with a method in Cypress 12 (latest) to be able to look at all 3 toasts, and be able to match any of them, 1 at a time...in any order.
Ex. If I have a toast message of "First Toast", then "Second Toast", then "Third Toast"
and I want to be able to have a test that can look at them and match one of them, but not necessarily the first one it sees.

Expected to get 1 and only 1 toast to match with this.

The problem with toasts is they come and go at different times, even if the gap between is small.

The problem with using .each() is cy.get('.messenger-message-inner') will move on as soon as it sees the first toast.

But if the 2nd, 3rd, etc are delayed even slightly they will never be caught.

Maybe assert the number of toasts expected, like this

Cypress.Commands.add('lookAtToast', (messages) => {  // array of messages

cy.get('.messenger-message-inner')
  .should('have.length', 3)
  .each((el, index) => {
    cy.wrap(el).should('contain.text', messages[index])
  })

If there is no strict order to the toasts (you seem to be saying that), then this variation would be better

Cypress.Commands.add('lookAtToast', (messages) => {  // array of messages

cy.get('.messenger-message-inner')
  .should('have.length', 3)
  .each((el, index) => {
    const text = el.text()
    expect(messages.includes(text)).to.eq(true)
  })

Here's another approach that should work as you describe in comments

Cypress.Commands.add('lookAtToast', (message) => {  // one message

  cy.get('.messenger-message-inner')   
    .then($toasts => [...$toasts].map(toast => toast.innerText))
    .should('include', message)  
})

// trigger toast 1
cy.lookAtToast('toast 1 message')

// trigger toast 2
cy.lookAtToast('toast 2 message')

// trigger toast 3
cy.lookAtToast('toast 3 message')

Here we get all the toasts currently showing on the page, convert the elements into the text content, then assert that the message passed in is one of those toast messages.

Another way is to make use of the toast message container, depending on how the HTML looks this could work.

Cypress.Commands.add('lookAtToast', (message) => {  // one message

  cy.get('.messenger-message-inner')   
    .parent()                      
    .should('contain', message)  
})

Here we are saying that the toast parent element has the message somewhere in itself or a child element.

Since .should('contain', message) checks all descendants, it will look at every toast for the message text.

https://docs.cypress.io/api/commands/each

Cypress.Commands.add('lookAtToast', (message) => {
  cy.get('.messenger-message-inner').each((el) => {
    cy.wrap(el).should('contain.text', message);
  });
});

</details>