Element presence

So far we've covered finding and interacting with elements that are present or will appear on the page. But how do we test for elements that should not render?

This is where you would normally reach for an inverse assertion to get a predictable result and guard yourself from false-positive tests:

const notificationVisiblePromise = vi.waitFor(() => {
	expect(notification).toBeVisible()
})

// Instead of asserting that the element is not visible,
// which may lead to false-positive results if it appears after a delay,
// check that the element has never appeared instead.
await expect(notificationVisiblePromise).rejects.toThrow()

Or, alternatively, use the designated waitForElementToBeRemoved() utility from React Testing Library:

await waitForElementToBeRemoved(notification)

However, there's a more convenient way to do this in Vitest!

👨‍💼 In this exercise, you will use the retry-ability of Vitest's expect.element() function to assert that the discount code has been removed from the UI once you click the respective button. Go to the

discount-code-form.browser.test.tsx

test suite and follow the instructions to complete the new test case.

03. Best practices/04. Element presence (💪 problem)

Element presence