Testing React Components with asynchronous methods

I must admit haven't used really jest-fetch-mock before, but from the docs and my little experiments, it looks like it replaces the global fetch with a mocked version. Notice how in this example isn't awaiting any promises: https://github.com/jefflau/jest-fetch-mock#simple-mock-and-assert. It's merely checking that fetch was called with the right arguments. So therefore I think you can remove the async/await and assert there is a call to jsonip.com.

What I think is tripping you up is actually the React lifecycle. Essentially it boils down to where you put the fetch call. The React team discourages you from putting "side-effects" (like fetch) in the constructor. Here's the official React docs description: https://reactjs.org/docs/react-component.html#constructor. Unfortunately I've not really found good documentation on why. I believe it's because React may call the constructor at odd times during the lifecycle. I think it is also the reason that you're having to manually call the fetchData function in your test.

The best practice for putting side-effects is in componentDidMount. Here's an ok explaination of why: https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/ (although it's worth noting that componentWillMount is now deprecated in React 16.2). componentDidMount is called exactly once, only after the component is rendered into the DOM.

It's also worth noting that this is all going to change soon with upcoming versions of React. This blog post/conference video goes into a lot more details: https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html

This approach means it will render initially in the loading state, but once the request has resolved you can trigger a re-render by setting state. Because you're using mount from Enzyme in your test, this will call all of the necessary lifecycle methods, including componentDidMount and so you should see the mocked fetch being called.

As for the higher order component, there's a trick that I sometimes use that is maybe not the best practice, but I think is a pretty useful hack. ES6 modules have a single default export, as well as as many "regular" exports as you like. I leverage this to export the component multiple times.

The React convention is to use the default export when importing components (i.e. import MyComponent from './my-component'). This means you can still export other things from the file.

My trick is to export default the HOC-wrapped component, so that you can use it in your source files as you would with any other component, but also export the unwrapped component as a "regular" component. That would look something like:

export class MyComponent extends React.Component {
  ...
}

export default myHOCFunction()(MyComponent)

Then you can import the wrapped component with:

import MyComponent from './my-component'

And the unwrapped component (i.e. for use in tests) with:

import { MyComponent } from './my-component'

It's not the most explicit pattern in the world, but it is quite ergonomic imo. If you wanted explicitness, you could do something like:

export const WrappedMyComponent = myHOCFunction()(MyComponent)
export const UnwrappedMyComponent = MyComponent

You could use react-testing-library's waitForElement to avoid having to explicitly await on your fetch call and simplify things a little:

import React from "react";
import IpAddress from "./IpAddress";
import { render, cleanup, waitForElement } from "react-testing-library";

// So we can use `toHaveTextContent` in our expectations.
import "jest-dom/extend-expect";

describe("IpAddress", () => {
  beforeEach(() => {
    fetch.resetMocks();
  });

  afterEach(cleanup);

  it("updates the text when an IP address has loaded", async () => {
    fetch.mockResponseOnce(JSON.stringify({ ip: "1.2.3.4" }));

    const { getByTestId } = render(<IpAddress />);

    // If you add data-testid="ip" to your <p> in the component.
    const ipNode = await waitForElement(() => getByTestId("ip"));

    expect(ipNode).toHaveTextContent("Pretty fly IP address you have there.");
  });
});

This will automatically wait for your element to appear and fail if it doesn't appear by some timeout. You still have to await but hopefully this is a little closer to what you originally wanted.