Stubbing fetch responses
As with many HTTP requests, our POST /customers
endpoint returns data: it will return the customer object together with a newly generated identifier that the backend has chosen for us. Our application will make use of this by taking the new ID and sending it back to the parent component (although we won’t build this parent component until Chapter 8, Building an Application Component).
To do that, we’ll create a new CustomerForm
prop, onSave
, which will be called with the result of the fetch
call.
But hold on—didn’t we just remove an onSubmit
prop? Yes, but this isn’t the same thing. The original onSubmit
prop received the form values submitted by the user. This onSave
prop is going to receive the customer object from the server after a successful save.
To write tests for this new onSave
prop, we’ll need to provide a stub value for global.fetch
, which essentially says, “This is the return value of calling...