How do I correct official React.js testing recipe to work for React/Jest/Fetch asynchronous testing?

I am trying to learn the simplest way to mock fetch with jest. I am trying to start with the official React docs recipe for fetch but it doesnt actually work without some modification.

My aim is to use Jest and (only) native React to wait for component rendering to complete with useEffect[].fetch() call before running assertions and testing initialisation worked.

I have imported the Data fetching recipe from official docs:

https://reactjs.org/docs/testing-recipes.html#data-fetching

into codesandbox here

https://codesandbox.io/s/jest-data-fetching-ov8og

Result: test fail

expect(received).toContain(expected) // indexOf

Expected substring: "123, Charming Avenue"
Received string:    "loading..."

Possible cause?: I suspect its failing because global.fetch is not being used in the component which appears to be using real fetch hence is stuck "loading".

UPDATE

I have managed to make the test work through trial and error. Changed the call to fetch in the actual component to global.fetch() to match the test. This is not desirable for working code to refer to global prefix everywhere fetch is used and is also not in the example code.

e.g.

export default function User(props) {
  const [user, setUser] = useState(null);

  async function fetchUserData(id) {
    // this doesnt point to the correct mock function
    // const response = await fetch("/" + id);
    // this fixes the test by pointing to the correct mock function
    const response = await global.fetch("/" + id);
    const json = await response.json();
    setUser(json);
  }
...

any help or advice much appreciated.