Mastering React Test-Driven Development

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 ...