I’m trying that at the moment of performing a test that validates the data in the modal, but when closing it to validate the next one, the click event is executed much higher than its position at the moment of finishing the open animation.

I have tried waiting until the .show class appears.

cy.('.modal-header')
  .find('button[data-dismiss="modal"]')
  .should('be.visible')
  .should('contain', '×')
  .click();

I have also created a command to run always waiting for the shown and hidden event to add an attribute and change it from false to true.

Cypress.Commands.add('listenToBootstrapModal', (selector) => {
  cy.get(selector).then(($modal) => {
    // Set initial attribute state
    $modal.attr('data-modal-open', 'false');

    // Use cy.on to listen for Bootstrap modal events
    Cypress.on('window:before:load', (win) => {
      Cypress.$(selector).on('shown.bs.modal', () => {
        console.log('Modal is shown'); // Debug log
        $modal.attr('data-modal-open', 'true');
      });

      Cypress.$(selector).on('hidden.bs.modal', () => {
        console.log('Modal is hidden'); // Debug log
        $modal.attr('data-modal-open', 'false');
      });
    });
  });
});

But in this case the event is never fired or Cypress is not able to hear it.

const MODAL_ID = "modal-velocidades";
const CONTEXT = `#${MODAL_ID}`;

beforeEach(() => {
    cy.visit("/");
    cy.listenToBootstrapModal(CONTEXT);
});

it('Modal - Validate that the value of the data and the title of each the modal match', () => {
    let btnValues = Object.values(velocidadesEnum);

    for (let i = 0; i < btnValues.length; i++) {
      let dataTitleModal;

      cy.getByC2C(btnValues[i])
        .click()
        .invoke('attr', 'data-modal-title')
        .then( attrVal => {
          dataTitleModal = attrVal
        })

      cy.get(CONTEXT)
      .should('be.visible')
      .should("have.attr", "data-cy-loaded", "true")
      .within( () => {

        cy.get(".modal_title").should("have.text", dataTitleModal);

        cy.get('.modal-header')
          .should('be.visible')
          .find('button[data-dismiss="modal"]')
          .should('be.visible')
          .should('contain', '×')
          .click()
      });

    }
  })

And I want to have a way to wait for the animations to finish and not interfere anymore with the correct positioning of the elements.