Mastering React Test-Driven Development

Displaying errors to the user

Let's display an error to the user if the fetch returns an ok value of false. This would occur if the HTTP status code returned was in the 400 or 500 range, although for our tests we won't need to worry about the specific status code. Follow these steps:

1. Add the following test in test/CustomerForm.test.js:

it('renders error message when fetch call fails', async () => {  fetchSpy.stubReturnValue(Promise.resolve({ ok: false }));  render(<CustomerForm />);  await act(async () => {    ReactTestUtils.Simulate.submit(form('customer'));  });  const errorElement = container.querySelector('.error');  expect(errorElement).not.toBeNull();  expect(errorElement.textContent).toMatch('error occurred');});

2. To make this pass, introduce ...