How to fix Text content does not match. Expected: "..." but received: "..." in React

// Problem: trailing space in DOM
<div>Login </div>

// Fails: exact match
screen.getByText("Login");

// Solution 1: trim text content
const element = screen.getByText((content, element) => {
  return element.textContent.trim() === "Login";
});

// Solution 2: include whitespace in query
screen.getByText("Login ");

// Solution 3: use regex with optional whitespace
screen.getByText(/^Login\s*$/);

// Problem: text split by <span>
<div>2<span>-</span>3</div>

// Fails: looks for "2-3" in a single text node
screen.getByText("2-3");

// Solution 1: query by partial text
screen.getByText("2");
screen.getByText("3");

// Solution 2: custom text matcher function
screen.getByText((content, element) => {
  return element.textContent === "2-3";
});

// Solution 3: getByTextContent helper function
function getByTextContent(text) {
  return screen.getByText((content, element) => {
    return element.textContent === text;
  });
}

const element = getByTextContent("2-3");

// Using getByText (fails if text not immediately present)
// screen.getByText("Loading...");

// Using findByText (waits for text)
const loadingElement = await screen.findByText("Loading...");

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

// For text that appears then disappears (like loading states)
await waitFor(() => {
  expect(screen.queryByText("Loading...")).not.toBeInTheDocument();
});

// Case insensitive matching
screen.getByText(/login/i);

// Partial text matching
screen.getByText(/Log/); // matches "Login", "Logout", "Logger"

// Match dynamic content (like counts)
screen.getByText(/Items: \d+/); // matches "Items: 5", "Items: 10"

// Match with optional whitespace
screen.getByText(/^\s*Login\s*$/);

// Complex pattern matching
screen.getByText(/User:\s*\w+\s*\(ID: \d+\)/);

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

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

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

// Print specific element
const element = screen.getByTestId('my-element');
screen.debug(element);

// Check textContent directly
console.log('Text content:', element.textContent);
console.log('Inner HTML:', element.innerHTML);

// Use logTestingPlaygroundURL for visual debugging
screen.logTestingPlaygroundURL();

function normalizeText(text) {
  return text
    .trim()
    .replace(/\s+/g, ' ') // collapse multiple spaces
    .replace(/\n/g, ' ') // replace newlines with spaces
    .toLowerCase(); // optional: for case-insensitive
}

// Use in custom matcher
screen.getByText((content, element) => {
  const normalizedActual = normalizeText(element.textContent);
  const normalizedExpected = normalizeText("Expected Text");
  return normalizedActual === normalizedExpected;
});

// Or as a reusable query
function getByNormalizedText(expectedText) {
  return screen.getByText((content, element) => {
    return normalizeText(element.textContent) === normalizeText(expectedText);
  });
}

const element = getByNormalizedText("  Login  "); // handles extra spaces