Why use data-testid?

Use data-testid when accessible selectors (like role or label text) are not available.

Example

First, add the data-testid attribute to your component:

// Button.tsx
export function Button() {
  return <button data-testid="submit-button">Submit</button>;
}

import { render, screen } from '@testing-library/react';
import { Button } from './Button';

it('finds the button by test id', () => {
  render(<Button />);
  expect(screen.getByTestId('submit-button')).toBeInTheDocument();
});

Tips

• Prefer roles/labels when possible.
• Keep test IDs stable and descriptive.