How to wait to assert an element never appears in the document?

Question

I want to assert that an element never appears in my document. I know I can do this:

import '@testing-library/jest-dom/extend-expect'

it('does not contain element', async () => {
    const { queryByText } = await render(<MyComponent />);
    expect(queryByText('submit')).not.toBeInTheDocument();
});

But in my case I need to wait to ensure that the element isn't added after a delay. How can I achieve this?

Perdita

Answer 1

There are two ways to do this, both involving react-testing-library's async helper function waitFor.

The first and simpler method is to wait until something else happens in your document before checking that the element doesn't exist:

import '@testing-library/jest-dom/extend-expect'

it('does not contain element', async () => {
    const { getByText, queryByText } = await render(<MyComponent />);

    await waitFor(() => expect(getByText('something_else')).toBeInTheDocument());

    expect(queryByText('submit')).not.toBeInTheDocument();
});

You can use the same strategy with any valid Jest assertion:

import '@testing-library/jest-dom/extend-expect'
import myFunc from './myFunc'

it('does not contain element', async () => {
    const { getByText, queryByText } = await render(<MyComponent />);

    await waitFor(() => expect(myFunc).toBeCalled());

    expect(queryByText('submit')).not.toBeInTheDocument();
});

If there isn't any good assertion you can use to wait for the right time to check an element does not exist, you can instead use waitFor to repeatedly check that an element does not exist over a period of time. If the element ever does exist before the assertion times out, the test will fail. Otherwise, the test will pass.

import '@testing-library/jest-dom/extend-expect'

it('does not contain element', async () => {
    const { getByText } = await render(<MyComponent />);

    await expect(async () => {
        await waitFor(
            () => expect(getByText('submit')).toBeInTheDocument();
        );
    }).rejects.toEqual(expect.anything());
});

You can adjust the amount of time waitFor will keep checking and how frequently it will check using the timeout and interval options. Do note, though, that since this test waits until waitFor times out for the test to pass, increasing the timeout option will directly increase the time this test takes to pass.

And here is the helper function I wrote to avoid having to repeat the boilerplate:

export async function expectNever(callable: () => unknown): Promise<void> {
    await expect(() => waitFor(callable)).rejects.toEqual(expect.anything());
}

Which is then used like so:

it('does not contain element', async () => {
  const { getByText } = await render(<MyComponent />);

  await expectNever(() => {
    expect(getByText('submit')).toBeInTheDocument();
  });
});

Perdita

Answer 2

We use plain JavaScript and the expectNever function from @Nathan throws an error:

Error: expect(received).rejects.toEqual()
Matcher error: received value must be a promise

I modified it to look and feel more like waitFor and this works:

const waitForNeverToHappen = async (callable) => {
    await expect(waitFor(callable)).rejects.toEqual(expect.anything())
}
    
await waitForNeverToHappen(() => expect(screen.getByText('submit')).toBeInTheDocument())

Reprography

Answer 3

Consider using waitForElementToBeRemoved documented here: https://testing-library.com/docs/guide-disappearance/#waiting-for-disappearance

Westney

This won't work because waitForElementToBeRemoved expects the element to be visible first, which is not the OP's case, where the element starts as not visible and must stay like that. – Forehand

Answer 4

An edge case alternative would be:

export const expectNever = async (callable: () => unknown) => {
  try {
    await waitFor(callable);
  } catch {
    return true;
  }
  throw new Error('Occurred what should not occur!');
};

and use it like:

await expectNever(() => {
    expect(
      screen.queryByText('should not be rendered')
    ).toBeInTheDocument();
  });

Subshrub

Answer 5

Instead of using waitFor() helper, you can first await for another element using findByText() and expect to be in the document. Also, it is a better practice to use screen.

  import {render, screen} from '@testing-library/react'
    
  it('does not contain element', async () => {
    render(<MyComponent />);
    const anotherElement = await screen.findByText("another_element");
    const submit = screen.queryByText("submit");
    
    expect(anotherElement).toBeInTheDocument();
    expect(submit).not.toBeInTheDocument();
  });

Treble