How to fix Unable to find an element with the text: in React

import { screen } from '@testing-library/react';

// Debug to see exact rendered output
screen.debug();

// Then check your query matches exactly
const element = screen.getByText('Exact Text Here');

// ❌ Fails if element renders async
const element = screen.getByText('Loading...');

// ✅ Waits for element to appear (up to default timeout)
const element = await screen.findByText('Data loaded');

// ✅ With custom timeout
const element = await screen.findByText('Data loaded', {}, { timeout: 3000 });

// Check if element is hidden
const element = screen.getByText('Submit');
expect(element).not.toHaveStyle('display: none');
expect(element).not.toHaveAttribute('aria-hidden', 'true');

// Use getByRole for better accessibility testing
const button = screen.getByRole('button', { name: /submit/i });

// Check if in document but not visible
const element = screen.queryByText('Submit');
if (element) {
  console.log('Element exists but might be hidden:', element);
}

// Exact match (default)
screen.getByText('Hello World');

// Case-insensitive regex
screen.getByText(/hello world/i);

// Partial text match
screen.getByText('Hello', { exact: false });

// Contains specific text
screen.getByText((content, element) => {
  return content.includes('Hello') && element.tagName === 'BUTTON';
});

import { screen } from '@testing-library/react';

// Generates a URL to visualize your rendered DOM
screen.logTestingPlaygroundURL();

// Or get the HTML directly
console.log(screen.container.innerHTML);

// Use prettyDOM for formatted output
import { prettyDOM } from '@testing-library/react';
console.log(prettyDOM(screen.container));

// Mock necessary dependencies
jest.mock('../api', () => ({
  fetchData: jest.fn().mockResolvedValue({ data: 'test' })
}));

// Set up initial state
const initialState = { loading: false, data: 'Expected Text' };
render(<MyComponent initialState={initialState} />);

// Or use act for state updates
import { act } from '@testing-library/react';
await act(async () => {
  // Trigger state update
  fireEvent.click(screen.getByText('Load Data'));
});

// Now query for the element
expect(await screen.findByText('Expected Text')).toBeInTheDocument();