How to test disappearance?

[pr0da]

• 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?

[kentcdodds]

I actually don't know how to do this I'm afraid :-( If you could dig in a little bit and come up with a good solution that would be appreciated! Thank you!

[DJTB]

Not an ideal solution, but you can work around it using cypress .wait(n)

it('remove member', () => {
  cy.getByTestId(`remove-member-${username}`)
    .click()
    .wait(1000)
    .queryByTestId(`member-${username}`)
    .should('not.exist');
});

[kentcdodds]

Actually I've done this since and the queryBy* queries work fine without the wait for me. You can even add a timeout if it disappears quickly to make the command and assertion execute faster.

[DJTB]

Hmm, for me it resolves instantly with the still existing element if there's no wait, even with a timeout since the element exists when queryByTestId starts. (Removal is subject to server response, so it's always going to occur after the query runs).

[kentcdodds]

Ah, right, that makes sense. My situation was slightly different. I think a wait is required here... I wonder how it would work with a normal get command... 🤔

[DJTB]

Solution might be a config flag that inverts the behaviour.
Not a great name, but hypothetically { invert: true }
Waits until query cannot find the specified element, then immediately returns undefined?
If the element still exists when timeout is exceeded, it would return the element.

Definitely needs a clearer config flag than invert though...

[kentcdodds]

I feel like this is a problem that Cypress should solve honestly.

[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.

[Pallinder]

I'm encountering the same issue.
Im waiting for a loading indicator to get removed from a button, relying on cy.get('loading-indicator') works. Relying on either query or getByTestId resolves straight away and fails.
The command is

cy.get('loading-indicator').should('not.exist') // works
cy.getByTestId('loading-indicator').should('not.exist') // does not work
cy.queryByTestId('loading-indicator').should('not.exist') // does not work

[kentcdodds]

Remember that get accepts a query string. I think you should try: get('[data-testid="loading-indicator"]')

[digitaldrummerj]

@DJTB could you use a combo of cy.route and cy.wait? I know for loading of data before testing a page I had to setup a cy.route('GET', '/api/').as('myapi'), call cy.visit('/') and and then call cy.wait('@myapi') to wait for the API call to finish before running tests.

[alexkrolick]

#30 should fix this

[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"