ReactJS testing causing a typeError: network request failed

Question

I have been trying to simulate file-upload as a test for my react-app but that was generating the following error :

 TypeError: Network request failed

  at node_modules/whatwg-fetch/dist/fetch.umd.js:535:18
  at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:516:19)

This is my test: trying to upload a file and check if an alert is raised.

 test("triggers alert when receiving a file with inadequate content", async () => {
    renderComponent();
    global.alert = jest.fn();
    const fileContent = raw("./file.kml");
    const fakeFile = new File(
      [fileContent],
      "file.kml",
      { type: "text/xml" }
    );
    const selectType = screen.getByTestId("select-type");
    await fireEvent.change(selectType, { target: { value: "type" } });
    const fileUploader = screen.getByTestId("file-uploader");

    await fireEvent.change(fileUploader, {
      target: { files: [fakeFile] },
    });

    await waitFor(() => {
      expect(global.alert).toHaveBeenCalledWith(
        "alert"
      );
    });
  });

});

I am kind of confused, because file is received and parsed by the component and it raise the alert I need to check but still fails because of the network error. PS: I tried to mock a fetch but still have the same problem. Any help would be appreciated.

Answer 1

I have been getting the same Network request failed: Connection refused error while testing.

I have explored many threads but no luck.

Out of the blue starting the back end server worked for me. (Even though I used mock service worker that intercepts network calls, starting the back end server worked.) I don't know why.

Also, I have used import fetch from 'isomorphic-fetch'; in setup-test.js instead of whatwg-fetch.

In the end try adding a timeout:3000 option to your waitFor.