// @vitest-environment jsdom
/**
 * Smoke test for renderWithProviders: proves a component using
 * @tanstack/react-query's useQuery renders under the shared provider wrapper
 * and resolves an async (mocked) fetch. Guards the component-test harness.
 */
import './dom-setup';
import { describe, it, expect } from 'vitest';
import { useQuery } from '@tanstack/react-query';
import { screen, waitFor } from '@testing-library/react';
import { renderWithProviders } from './render-helpers';

function Widget() {
  const { data, isLoading } = useQuery({
    queryKey: ['smoke'],
    queryFn: async () => 'loaded-value',
  });
  if (isLoading) return <p>loading</p>;
  return <p data-testid="result">{data}</p>;
}

describe('renderWithProviders harness', () => {
  it('renders a useQuery component and resolves the query', async () => {
    renderWithProviders(<Widget />);
    expect(screen.getByText('loading')).toBeInTheDocument();
    await waitFor(() => expect(screen.getByTestId('result')).toHaveTextContent('loaded-value'));
  });
});
