Asserting Accessible Form Validation States with Testing Library

import React, { useState } from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
 
function EmailForm({ onSubmit }) {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
 
  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) {
      setError('Please provide a valid email address.');
      return;
    }
    setError('');
    onSubmit(email);
  };
 
  return (
    <form onSubmit={handleSubmit} noValidate>
      <label htmlFor="email-input">Email Address</label>
      <input
        id="email-input"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        aria-invalid={Boolean(error)}
        aria-describedby={error ? 'email-error' : undefined}
      />
      {error && <span id="email-error" role="alert">{error}</span>}
      <button type="submit">Subscribe</button>
    </form>
  );
}
 
test('displays accessible error message on invalid email submission', () => {
  render(<EmailForm onSubmit={jest.fn()} />);
  const input = screen.getByLabelText(/email address/i);
  const submitButton = screen.getByRole('button', { name: /subscribe/i });
 
  fireEvent.change(input, { target: { value: 'invalid-email' } });
  fireEvent.click(submitButton);
 
  expect(input).toHaveAttribute('aria-invalid', 'true');
  const alert = screen.getByRole('alert');
  expect(alert).toHaveTextContent(/valid email address/i);
});