Mastering React Test-Driven Development

Labeling the field

Let's add a label to the field so the user knows what they are typing in:

const labelFor = formElement =>  container.querySelector(`label[for="${formElement}"]`);it('renders a label for the first name field', () => {  render(<CustomerForm />);  expect(labelFor('firstName')).not.toBeNull();  expect(labelFor('firstName').textContent).toEqual('First name');});

Make this pass by changing the JSX fragment to read as follows:

<form id="customer">  <label htmlFor="firstName">First name</label>  <input    type="text"    name="firstName"    value={firstName}    readOnly  /></form>

The JSX htmlFor attribute sets the HTML for attribute. for couldn't be used in JSX because it is a reserved JavaScript keyword. The attribute is used to signify that the ...