How to wait for the number of list items to change in Cypress?

I have a list and I want to test filtering (you input some text, and the list gets filtered).

So, in Cypress, I'd like to wait some time for that number of items to change. I don't know the number of items that I should expect. It would also be great if I wouldn't care whether that number is greater or lesser than the initial number.

How should I go with this? I tried cy.wait(1000) but it did nothing (I guess because the list items are already there, so it didn't wait at all)...

EDIT1:

I'm trying to get the initial number of items from this code, but itemsCountBefore gets set to 7 inside the lambda function, but when it gets outside (second log) it is undefined

  let itemsCountBefore;
  cy.get(homePage.elements.anyListItem).then(($listItems) => {
    itemsCountBefore = $listItems.length;
    cy.log(`itemsCountBefore1: ${itemsCountBefore}`)
  });
  cy.log(`itemsCountBefore2: ${itemsCountBefore}`)

The problem is you need to wait for the external count variable to be updated before checking it's value.

To do so use a .then() callback after the action that makes the change (the filtering action).

Also is useful to use a .should() to make your assertion. If the action involves some asynchronous activity (like sending the filter input to a server), you need some retry happening to avoid flaky test results.

The simplest assertion is that current does not equal initial.

let initial;

cy.get(homePage.elements.anyListItem)
  .its('length')
  .then(count => initial = count)

cy.get('input-filter-selector')
  .type('filter-text')
  .then(() => {
    cy.get(homePage.elements.anyListItem)
      .its('length')
      .should('not.eq', initial)
  })

To achieve this, you can follow these steps:

1-Get the initial number of items in the list.

2-Perform the action that triggers the filtering.

3-Use cy.wait() to wait for the number of items to change.

let initialItemCount;
cy.get('list-selector').then(($list) => {
  initialItemCount = $list.children().length;
});

cy.get('input-filter-selector').type('filter-text');

cy.waitUntil(() => {
  cy.get('list-selector').then(($list) => {
    const currentItemCount = $list.children().length;
    // Wait until the number of items changes from the initial count
    return currentItemCount !== initialItemCount;
  });
}, { timeout: 5000, interval: 500 });