Mastering React Test-Driven Development

Using state instead of props

It's finally time to introduce some state into our component. Add the following test, which what should happen when the text field value changes:

it('saves new first name when submitted', async () => {  expect.hasAssertions();  render(    <CustomerForm      firstName="Ashley"      onSubmit={({ firstName }) =>        expect(firstName).toEqual('Jamie')      }    />  );  await ReactTestUtils.Simulate.change( firstNameField(), {    target: { value: 'Jamie' }  });  await ReactTestUtils.Simulate.submit(form('customer'));});

The call to Simulate.change dispatches a React onChange event to the field. The event object sends the value of the text field to the event handler, which we'll use to set state.

In the browser, this event would be dispatched after ...