Unable to find an element ⚛️ React

TestingLibraryElementError: Unable to find an element with the text: x

getBy* found no matching element in the rendered output.

Seen on: React

Meaning

The text is split across elements, rendered asynchronously, differs in case/whitespace, or the component never rendered it. The error prints the current DOM to compare.

Common causes

  • Element appears after async work (use findBy)
  • Text split across nodes
  • Exact text/case mismatch
  • Wrong query (getByText vs getByRole)

⚡ Quick fix

  1. Use await findByText for async UI
  2. Use a regex or { exact: false }
  3. Prefer getByRole with name for accessibility-based queries

Detailed fix by platform

React

  1. await screen.findByRole('button', { name: /save/i });

How to diagnose

  1. DOM — What does the printed DOM contain?
  2. Timing — Async?

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.