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>

Now we need to ensure that our input has that same id, so that they match up. Add the following next test:

it('assigns an id that matches the label id to the first name field', () => {
  render(<CustomerForm />);
  expect(firstNameField().id).toEqual('firstName');
});

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