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?

Answer 1

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())