Error: Uncaught [Error: DialogTrigger must be used within Dialog]

[andres-dos-santos]

Hi guys, I'm writing tests on a NextJS website, I use Vitest + testing-library-react for this, but I got the error Error: Uncaught [Error: DialogTrigger must be used within Dialog], but the component I want to test is this one...

export function HistoryTrigger() {
  const { isSignedIn } = useSession()

  return (
    isSignedIn && (
      <SheetTrigger data-testid="history-trigger-btn">
        <p className="font-medium -tracking-wider text-[13px]">Seu histórico</p>
      </SheetTrigger>
    )
  )
}

I don't even have Dialog installed in my project.

The test I wrote was this one.

import { vi, expect, test } from 'vitest'
import { render, screen } from '@testing-library/react'

import { HistoryTrigger } from './history-trigger'

vi.mock('@clerk/nextjs', () => ({
  useSession: vi.fn(() => ({ isSignedIn: true })),
}))

test('should render if logged in', async () => {
  render(<HistoryTrigger />)

  const component = await screen.findByTestId('history-trigger-btn')

  expect(component).toBeDefined()
})

Why does this happen?