Passing in an existing value

Since this form will be used when modifying existing customers as well as adding new ones, we must set the text field's initial value to the existing first name if set:

it('includes the existing value for the first name', () => {
  render(<CustomerForm firstName="Ashley" />);
  const field = form('customer').elements.firstName;
  expect(field.value).toEqual('Ashley');
});

To make this test pass, change the component definition to the following. We use a prop to pass in the previous first name value:

export const CustomerForm = ({ firstName }) => (
  <form id="customer">
    <input
      type="text"
      name="firstName"
      value={firstName}
    />
  </form>
);

Running tests again, you'll see that the test passes, but with a warning:

PASS test/CustomerForm.test.js
  ● Console
 console.error node_modules/prop-types/checkPropTypes.js:19
      Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
  in input (created by CustomerForm)
  in form (created by CustomerForm)
  in CustomerForm

To get rid of the warning, add the word readOnly to the input tag. You might be thinking: surely, we don't want a read-only field? You're right, but we need a further test, for modifying the input value, before we can avoid using the readOnly keyword. We'll add that test a little further on.