Getbydisplayvalue React Testing Library ((top)) Today

Title: Using getByDisplayValue for Form Field Testing in React Testing Library Abstract React Testing Library (RTL) encourages testing user-visible behavior. The getByDisplayValue query provides a direct way to locate form input elements (like <input> , <textarea> , or <select> ) by their current displayed value —making tests more resilient and user-centric compared to using getByTestId or relying on internal component state.

1. Query Definition getByDisplayValue( value: string | RegExp, options?: { exact?: boolean; trim?: boolean; collapseWhitespace?: boolean; normalizer?: (text: string) => string; } ): HTMLElement

Returns : The matching input, textarea, or select element. Throws : If no element (or more than one) matches the display value.

2. Supported Elements

<input> (text, number, email, etc.) <textarea> <select> (matches the currently selected option's display text)

3. Common Use Cases 3.1 Verify a field's pre-filled value // Component renders with default value "John Doe" expect(screen.getByDisplayValue('John Doe')).toBeInTheDocument();

3.2 After user input or state change await userEvent.type(screen.getByLabelText(/name/i), 'Jane Smith'); expect(screen.getByDisplayValue('Jane Smith')).toBeInTheDocument(); getbydisplayvalue react testing library

3.3 Using with regular expressions (partial match) expect(screen.getByDisplayValue(/John/)).toBeInTheDocument();

3.4 Selecting based on exact match (case-sensitive by default) expect(screen.getByDisplayValue('admin', { exact: true })).toBeInTheDocument();

4. Best Practices & Patterns | Practice | Example | |----------|---------| | Prefer user-centric queries | Use getByDisplayValue over getByTestId for values the user sees. | | Combine with getByLabelText for targeting | const input = screen.getByLabelText(/email/i); expect(input).toHaveDisplayValue('test@example.com'); | | Avoid over-reliance on display value for dynamic forms | Use getByRole('textbox', { name: /email/i }) for interaction, then check value. | | Use within for scoped queries | const form = screen.getByRole('form'); expect(within(form).getByDisplayValue('42')).toBeVisible(); | Title: Using getByDisplayValue for Form Field Testing in

5. Common Pitfalls & Solutions | Pitfall | Solution | |---------|----------| | Multiple elements have same display value | Use getAllByDisplayValue + index, or refine with within or additional attributes. | | Select element fails to match | Match the display text of the <option> , not its value attribute. | | Whitespace differences | Use normalizer or trim: true option. | | Case mismatch | Use RegExp with i flag: /value/i . |

6. Example: Complete Test Suite import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import UserForm from './UserForm'; test('prefills name and allows editing', async () => { render(<UserForm defaultName="Alice" />); const nameInput = screen.getByLabelText(/name/i); // Assert initial display value expect(screen.getByDisplayValue('Alice')).toBeInTheDocument(); // Edit the value await userEvent.clear(nameInput); await userEvent.type(nameInput, 'Bob'); // Assert updated display value expect(screen.getByDisplayValue('Bob')).toBeInTheDocument(); }); test('select element by display value', () => { render(<RoleSelect defaultValue="Admin" />); expect(screen.getByDisplayValue('Admin')).toBeInTheDocument(); });