Mocking @radix-ui/react-id for stable snapshot testing

[pleek91]

I've built a component that used radix-ui that I am attempting to write some snapshot tests because the component can take many shapes. However @radix-ui/react-id causes tests to produce different ids if tests are added or removed. I've mocked react's useId but that doesn't seem to have any effect on the radix wrapper around it. I also attempted to mock radix-ui/react-id directly but that doesn't seem to have any effect.

Is it possible to mock the ids so they are stable?

This is how I'm attempting to mock them

import { vi } from "vitest"

vi.mock('react', async () => {
  const actual = await vi.importActual('react')
  return {
    ...actual,
    useId: () => 'test-id',
  }
})

vi.mock('@radix-ui/react-id', () => {
  return {
    useId: (deterministicId?: string) => `${deterministicId}-radix-test-id`,
  }
})

Thanks!