Best pattern for checking for absence of Element

[xenobytezero]

Just started using Vitest 2.1.0, and found a eccentricity that made me stop andcheck I'm not missing something.

The documented way of checking for the existence of an element is the following

await expect.element(page.getByText('Some Text')).toBeInTheDocument();

the standard Vitest assertion pattern suggests that to check for the absence of an element is the following

//                                                \/-----changed
await expect.element(page.getByText('Some Text')).not.toBeInTheDocument();

However this ends up throwing an error, rather than failing the test

 FAIL  src/components/base/x.component.spec.ts > x.component > should render the component correctly
Error: Matcher did not succeed in 1000ms
 ❯ src/components/base/x.component.spec.ts:45:55
     45|     await expect.element(page.getByTestId('path')).not.toBeInTheDocument();
       |                                                       ^
     46|     //expect(unknownEle.query()).toBeNull();
     47| 
Caused by: VitestBrowserElementError: Cannot find element with locator: getByTestId('path')

Looking around, this is a known issue with jest-dom and the recommendation is to use the query selectors rather than the get selectors

testing-library/jest-dom#391 (comment)

The jest-dom docs confirm this

https://github.com/testing-library/jest-dom?tab=readme-ov-file#tobeinthedocument

However the query selectors are not exposed by Vitest.

The solution I have come to is

expect(page.getByTestId('path').query()).toBeNull();

but that seems like a big departure from the other pattern for what is essentially the inverse.

Is there a better way of doing this? The docs don't seem to acknowledge this as an issue, so I want to check

[sheremet-va]

You can do something like this:

await expect.poll(() => page.getByTestId('path').query()).not.toBeInTheDocument()

[xenobytezero]

Agreed, this is a little cleaner than what I was doing before, but I think my point still stands that it goes against the established pattern of Vitest expectations where you can just .not a matcher.

Are there any plans to add support for the query selectors from jest-dom?

[sheremet-va]

I think this can be supported by Vitest by checking the state in the .poll function internally, but it needs more investigation. Feel free to open a feature request issue.

[xenobytezero]

Will do, thanks for the responses!

[sheremet-va]

This should be supported after #6634 is released