Attach a stable testid to default baseElement

src/pure.tsx

@@ -74,6 +74,7 @@ export async function render(
     // default to document.body instead of documentElement to avoid output of potentially-large
     // head elements (such as JSS style blocks) in debug output
     baseElement = document.body
+    document.body.dataset.testid = 'test-body'
   }
 
   if (!container) {

test/fixtures/ComponentThatChanges.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import type { JSX } from 'react/jsx-runtime'
+
+export function ComponentThatChanges({
+  timeout = 1500,
+}: {
+  timeout?: number
+}): JSX.Element {
+  const [show, setShow] = React.useState(false)
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setShow(true), timeout)
+    return () => clearTimeout(timer)
+  }, [timeout])
+
+  return <div>{show ? 'Hello Vitest!' : 'Loading...'}</div>
+}

test/render.test.tsx

@@ -6,6 +6,7 @@ import { render } from 'vitest-browser-react'
 import { HelloWorld } from './fixtures/HelloWorld'
 import { Counter } from './fixtures/Counter'
 import { SuspendedHelloWorld } from './fixtures/SuspendedHelloWorld'
+import { ComponentThatChanges } from './fixtures/ComponentThatChanges'
 
 test('renders simple component', async () => {
   const screen = await render(<HelloWorld />)
@@ -49,3 +50,32 @@ test('waits for suspended boundaries', async ({ onTestFinished }) => {
   await result
   expect(page.getByText('Hello Vitest')).toBeInTheDocument()
 })
+
+test('should use default testid as the root selector', async () => {
+  const stuff = document.createElement('div')
+  stuff.textContent = 'DOM content that might change'
+  document.body.appendChild(stuff)
+
+  setTimeout(() => {
+    stuff.textContent = 'Changed'
+  }, 1000)
+
+  const screen = await render(<div></div>)
+
+  expect(page.elementLocator(screen.baseElement).selector).toEqual(
+    'internal:testid=[data-testid="test-body"s]',
+  )
+})
+
+test('Should correctly select an element after dom changes', async () => {
+  const stuff = document.createElement('div')
+  stuff.textContent = 'DOM content that might change'
+  document.body.appendChild(stuff)
+  setTimeout(() => {
+    stuff.textContent = 'Changed'
+  }, 1000)
+
+  const screen = await render(<ComponentThatChanges />)
+
+  await expect.element(screen.getByText('Hello Vitest!')).toBeVisible()
+})