How to test disappearance?

• cypress-testing-library version: 2.2.0
• node version: 9.4.0
• yarn version: 1.7.0

Relevant code or config

// I have a table with users, and I want to test user deletion
cy.getByTestId(`user-id-${userId}`).within(() => {
  cy.getByText('Remove').click();
});
cy.getByTestId(`user-id-${userId}`).should('not.exist');

What you did: I’ve tried to use cypress-testing-library custom commands with should(‘not.exist’) expectation.

What happened: The expectation failed, because cypress does not wait until the row/element disappeared.

On the other hand the following works as expected:

cy.getByTestId(`user-id-${invitee.userId}`).within(() => {
  cy.getByText('Remove').click();
});
cy.get(`[data-testid="user-id-${invitee.userId}"`).should('not.exist');

What would be the proper way to test element disappearance with custom commands?

[pr0da]

Sorry for the radio silence. I figured out that the following works as expected:

cy.getByTestId(`user-id-${userId}`).then(
  $el => cy.wrap($el).should('not.exist')
);

So we ended up overwriting cypress-testing-library commands by wrapping up subject:

['getByTestId', 'getByLabelText', 'getByText'].forEach(name => {
  Cypress.Commands.overwrite(name, (original, ...rest) =>
    original(...rest).then(subject => cy.wrap(subject, { log: false }))
  );
});

My plan was to investigate this further and eventually open a pr with a fix but it won`t happen at least for one month.

I hope this is helpful at least.

[krvajal]

I am having a similar problem. In my case, I have a button that changes its text like this “SAVE” => “SAVING” [duration unknown] => “SAVE” or (error case) “SAVE” => “SAVING” [duration unknown] => “COULD NOT SAVE”

The “SAVING” state can take some time to change. Is there a way to detect when the “SAVING” text is gone and then assert that the text changed to “SAVE”