fix: attach a stable testid to default baseElement and container (#44)

Author: nizans

package.json

@@ -83,6 +83,7 @@
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/browser-playwright": "^4.0.0-beta.15",
+    "@vitest/utils": "^4.0.17",
     "bumpp": "^9.4.2",
     "changelogithub": "^0.13.9",
     "eslint": "^9.8.0",

pnpm-lock.yaml

@@ -1,11 +1,22 @@
 import type { Locator, LocatorSelectors, PrettyDOMOptions } from 'vitest/browser'
-import { page, utils } from 'vitest/browser'
+import { page, server, utils } from 'vitest/browser'
 import React from 'react'
 import type { Container } from 'react-dom/client'
 import ReactDOMClient from 'react-dom/client'
+import { nanoid } from '@vitest/utils/helpers'
 
 const { debug, getElementLocatorSelectors } = utils
 
+function getTestIdAttribute() {
+  return server.config.browser.locators.testIdAttribute
+}
+
+function ensureTestIdAttribute(element: HTMLElement) {
+  if (!element.hasAttribute(getTestIdAttribute())) {
+    element.setAttribute(getTestIdAttribute(), nanoid())
+  }
+}
+
 let activeActs = 0
 
 function setActEnvironment(env: boolean | undefined): void {
@@ -80,6 +91,11 @@ export async function render(
     container = baseElement.appendChild(document.createElement('div'))
   }
 
+  // Ensuring testid attributes exists so that the generated locators will be stable
+  // https://github.com/vitest-community/vitest-browser-react/issues/42
+  ensureTestIdAttribute(baseElement)
+  ensureTestIdAttribute(container)
+
   let root: ReactRoot
 
   if (!mountedContainers.has(container)) {

src/pure.tsx

@@ -1,7 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders simple component 1`] = `
-<div>
+<div
+  data-testid="stable-snapshot"
+>
   <div>
     Hello World
   </div>

test/__snapshots__/render.test.tsx.snap

@@ -0,0 +1,25 @@
+import { expect, test } from 'vitest'
+import { render } from 'vitest-browser-react'
+import { page, server } from 'vitest/browser'
+
+test('should apply and use a unique testid as the root selector when it does not exists', async () => {
+  const screen = await render(<div>Render</div>)
+  const selector = page.elementLocator(screen.baseElement).selector
+
+  expect(selector).toMatch(/^internal:testid=\[[^\]]*\]$/)
+})
+
+test('should apply and use a unique testid as the locator selector when using default container', async () => {
+  const screen = await render(<div>Render</div>)
+
+  expect(screen.locator.selector).toMatch(/^internal:testid=\[[^\]]*\]$/)
+})
+
+test('should not override testid attribute if already set', async () => {
+  document.body.setAttribute(server.config.browser.locators.testIdAttribute, 'custom-id')
+
+  const screen = await render(<div>Render</div>)
+  const selector = page.elementLocator(screen.baseElement).selector
+
+  expect(selector).toBe(`internal:testid=[${server.config.browser.locators.testIdAttribute}="custom-id"s]`)
+})

test/render-selector.test.tsx

@@ -1,5 +1,5 @@
 import { expect, test, vi } from 'vitest'
-import { page, userEvent } from 'vitest/browser'
+import { page, server, userEvent } from 'vitest/browser'
 import { Button } from 'react-aria-components'
 import { Suspense } from 'react'
 import { render } from 'vitest-browser-react'
@@ -10,6 +10,8 @@ import { SuspendedHelloWorld } from './fixtures/SuspendedHelloWorld'
 test('renders simple component', async () => {
   const screen = await render(<HelloWorld />)
   await expect.element(page.getByText('Hello World')).toBeVisible()
+
+  screen.container.setAttribute(server.config.browser.locators.testIdAttribute, 'stable-snapshot')
   expect(screen.container).toMatchSnapshot()
 })
 

test/render.test.tsx

@@ -16,6 +16,10 @@ export default defineConfig({
         test: { name: 'dev' },
         resolve: { conditions: ['vdev'] },
       },
+      {
+        extends: true,
+        test: { name: 'selector-custom-attr', include: ['test/render-selector.test.tsx'], browser: { locators: { testIdAttribute: 'data-custom-test-id' } } },
+      },
     ],
     printConsoleTrace: true,
     browser: {