How do you test for the non-existence of an element with vitest browser testing?

[dwjohnston]

I've just discovered vitest browser testing, having pretty experienced with react-testing-library.

How would I assert on the non-existence of an element?

For example, it's quite common for me to write RTL test like:

	it("Update after clicking the button", () => {
		render(<TestComponent/>); 
		//assert initial existence of a thing
		expect(screen.getByText("foo").toBeInTheDocument(); 
		
		//interact
		userEvent.click(screen.getByRole("button"); 
		
		//now assert non-existence
		expect(screen.queryByText("foo").not.toBeInTheDocument(); 
		expect(screen.getByText("bar").toBeInTheDocument(); 
	});

Or if it's async:

	it("Update after clicking the button", async () => {
		render(<TestComponent/>); 
		//assert initial existence of a thing
		expect(await screen.findByText("foo").toBeInTheDocument(); 
		
		//interact
		userEvent.click(screen.getByRole("button"); 
		
		//now assert non-existence
		await waitFor(() => {
		    expect(screen.queryByText("foo").not.toBeInTheDocument(); 
		}); 
		expect(screen.getByText("bar").toBeInTheDocument(); 
	});


How do I do a similar thing with vitest browser testing? 

[hi-ogawa]

You can find .not.toBeInTheDocument() in https://vitest.dev/guide/browser/#examples