Mastering React Test-Driven Development

Stubbing the fetch API

The Git tag for this section is stubbing-fetch.

In this section, we'll use the fetch API to send customer data to our backend service. When the form is submitted, instead of directly calling the onSubmit prop, we'll send a POST HTTP request via the fetch API. If it returns a successful result, we'll call the onSubmit prop.

Add this next test in test/CustomerForm.test.js, right after the has a submit button test. This test is going to check that when we call fetch, we pass in the right arguments. In the Arrange phase of the test, we pass a new prop, fetch, to CustomerForm. This prop will eventually replace the onSubmit prop:

it('calls fetch with the right properties when submitting data', async () => { const fetchSpy ...