How to fix Unable to query by role "button" - no matching elements in React

// Good: button element has implicit role
<button>Click me</button>

// Good: div with explicit role
<div role="button">Click me</div>

// Problematic: div without role
<div onClick={handleClick}>Click me</div> // No role

// Problematic: hidden from accessibility
<div aria-hidden="true">
  <button>This button won't be found</button>
</div>

// Solution: remove aria-hidden or use { hidden: true } option
const button = screen.getByRole('button', { hidden: true });

// Using getByRole (fails if element not immediately present)
// const button = screen.getByRole('button');

// Using findByRole (waits for element)
const button = await screen.findByRole('button');

// You can also increase timeout if needed
const button = await screen.findByRole('button', {}, { timeout: 5000 });

// Old query (may fail after upgrade)
screen.getByRole('button', { name: /Ernie Variable 1/i });

// New query for combobox
screen.getByRole('combobox', { name: /Ernie Variable 1/i });

// Button with accessible name via aria-label
<button aria-label="Submit form">Submit</button>

// Query with name option
const button = screen.getByRole('button', { name: /submit form/i });

// Button with text content (implicit name)
<button>Save changes</button>

// Query with name from text content
const saveButton = screen.getByRole('button', { name: /save changes/i });

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

// Render your component
render(<MyComponent />);

// Print the DOM to console
screen.debug();

// Print only accessible elements
screen.logTestingPlaygroundURL();

// Check available roles
console.log(screen.getAllByRole('button'));