How to test/mock a fetch api in a React Component using Jest?

Question

I'm a newbie on test driven development, and I came across a section regarding testing/mocking a fetch api. But I'm struggling to write my own test. I built a simple weather app just to test/mock the fetch using jest. But the test keeps failing. I keep getting errors like:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: And not just that, I do not know where I am going wrong, so I came here to ask for tips on how I could mock/improve my test so that it can be successful. H

Here's my React code: (App.js)

  const [search, setSearch] = useState('');
  const [weather, setWeather] = useState({}); 
  
  const handleChange = (e) => {
    setSearch(e.target.value)
  }

 //function returns a promise
  const WeatherData = async (e) => {
    if (e.key === "Enter") {
      await fetch(`${api.baseURL}weather?q=${search}&appid=${api.key}`)
        .then(data => data.json())
        .then(city => {
          //console.log(city)
          setSearch('')
          setWeather(city)
        })
    }
  }

  const currentDate = (d) => {
    let months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    let days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

    let day = days[d.getDay()];
    let month = months[d.getMonth()];
    let year = d.getFullYear();
    let date = d.getDate();

    return `${day} ${date} ${month} ${year}`

  }

  return (
    <div className="App">
      <h2>International Weather</h2>
      <div className="wrapper">
        <input type="text" id="search-field" placeholder='Search...' onChange={handleChange} onKeyPress={WeatherData} />

        {(typeof weather.main != "undefined") ? (

          <div className='weather-box'>
            <h2>{weather.name}, {weather.sys.country}</h2>
            <h2> {currentDate(new Date())} </h2>

            <div id="weather">

              <div className="details" id="degrees">{(weather.main.temp - 273.15).toFixed(2)}°C</div>
              <div className="details" id="clouds">{weather.weather[0].main}</div>

            </div>
          </div>

        ) : (" ")}

      </div>
    </div>
  );
}

And my App.js code:

import { render, screen } from "@testing-library/react";
import App from "./App";

//creating a snapshot test to test if the rendered component is the same as the snapshot app
test("snapshot is correct", () => {
  const tree = render(<App />);
  expect(tree).toMatchSnapshot();
});

//test whether the function works
test("fetch works correctly", async () => {
  App(
    JSON.stringify({
      results: [{ user: "mandla", age: 43 }],
    })
  ).then((data) => {
    expect(data).toBe();
  });
});

Would appreciate if anyone can help me understand the problem and why my solution is not working.

Pressing

Answer 1

You can test the fetch API by any of the below methods.

1. mocked fetch

// This is the function we'll be testing
async function withFetch() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const json = await res.json()

  return json
}

// This is the section where we mock `fetch`
const unmockedFetch = global.fetch

beforeAll(() => {
  global.fetch = () =>
    Promise.resolve({
      json: () => Promise.resolve([]),
    })
})

afterAll(() => {
  global.fetch = unmockedFetch
})

// This is actual testing suite
describe('withFetch', () => {
  test('works', async () => {
    const json = await withFetch()
    expect(Array.isArray(json)).toEqual(true)
    expect(json.length).toEqual(0)
  })
})

2. jest.spyOn

const fetchMock = jest
  .spyOn(global, 'fetch')
  .mockImplementation(() =>
    Promise.resolve({ json: () => Promise.resolve([]) })
  )

describe('withFetch', () => {
  test('works', async () => {
    const json = await withFetch()

    // highlight-start
    expect(fetchMock).toHaveBeenCalledWith(
      'https://jsonplaceholder.typicode.com/posts'
    )
    // highlight-end

    expect(Array.isArray(json)).toEqual(true)
    expect(json.length).toEqual(0)
  })
})

Please have a look at the below link

https://benjaminjohnson.me/mocking-fetch

Ac

There is a linting error: Type ... is missing the following properties from type Response... – Alphonsoalphonsus

@Anh-ThiDINH try global.fetch= jest.fn(() => Promise.resolve(new Response())); – Cymogene

Thanks. I can mock await response.json() now. Do you know how to mock response.status?? – Cenesthesia

Answer 2

Worked on a fetch resolver that can be initialised for each test case.

type Method = "get" | "options" | "post" | "put" | "patch" | "delete";

// https://httpstat.us
export enum Status {
  OK = 200,
  Created = 201,
  Accepted = 202,
  NonAuthoritativeInformation = 203,
  NoContent = 204,
  ResetContent = 205,
  PartialContent = 206,
  MultipleChoices = 300,
  MovedPermanently = 301,
  Found = 302,
  SeeOther = 303,
  NotModified = 304,
  UseProxy = 305,
  Unused = 306,
  TemporaryRedirect = 307,
  PermanentRedirect = 308,
  BadRequest = 400,
  Unauthorized = 401,
  PaymentRequired = 402,
  Forbidden = 403,
  NotFound = 404,
  MethodNotAllowed = 405,
  NotAcceptable = 406,
  ProxyAuthenticationRequired = 407,
  RequestTimeout = 408,
  Conflict = 409,
  Gone = 410,
  LengthRequired = 411,
  PreconditionFailed = 412,
  RequestEntityTooLarge = 413,
  RequestURITooLong = 414,
  UnsupportedMediaType = 415,
  RequestedRangeNotSatisfiable = 416,
  ExpectationFailed = 417,
  Imateapot = 418,
  MisdirectedRequest = 421,
  UnprocessableEntity = 422,
  Locked = 423,
  TooEarly = 425,
  UpgradeRequired = 426,
  PreconditionRequired = 428,
  TooManyRequests = 429,
  RequestHeaderFieldsTooLarge = 431,
  UnavailableForLegalReasons = 451,
  InternalServerError = 500,
  NotImplemented = 501,
  BadGateway = 502,
  ServiceUnavailable = 503,
  GatewayTimeout = 504,
  HTTPVersionNotSupported = 505,
  VariantAlsoNegotiates = 506,
  InsufficientStorage = 507,
  NetworkAuthenticationRequired = 511,
  Webserverisreturninganunknownerror = 520,
  Connectiontimedout = 522,
  Atimeoutoccurred = 524
}

/**
 * Stub API request, response in test cases.
 * - should be initialized and destroyed within the context of a specific case.
 * - highly customizable
 *
 * <pre>
 *  describe("Fetch API", () => {
 *    let fetchResolver!: FetchResolver;
 *      beforeEach(() => {
 *      fetchResolver = new FetchResolver();
 *    });
 *
 *    it("should load api", async () => {
 *      // stub
 *      fetchResolver.stub( "http://localhost:8080/endpoint", "post", { id: 100 }, { created: true }, 200);
 *      // fetch
 *      fetch("http://localhost:8080/endpoint",
 *        { method: "post", body: JSON.stringify({ id: 100 })}
 *      ).then((response) => {
 *        if (response.ok) {
 *          response.text().then((text) => {
 *            console.log(text); // { created: true }
 *            expect(text).toBeEqual({ created: true });
 *          });
 *        }
 *      });
 *    });
 *
 *    afterEach(() => {
 *      fetchResolver.clear();
 *    });
 *  });
 * </pre>
 *
 * Even though jest executes tests in parallel jest instance,
 * We can't go wrong if stubs are cleaned after its use
 */
export class FetchResolver {
  private mocks: Map<string, Response> = new Map();
  constructor() {
    this.init();
  }

  public stub(
    uri: string,
    method: Method,
    payload: any,
    response: any,
    status: Status
  ) {
    const finalRequest: { input: RequestInfo | URL; init?: RequestInit } = {
      input: uri,
      init: {
        method: method,
        body: JSON.stringify(payload)
      }
    };
    console.log(
      `mocking fetch :::\nrequest ${this.prettyPrint(
        finalRequest
      )} with \nresponse ${this.prettyPrint(response)} ans status ${status}`
    );
    this.mocks.set(
      JSON.stringify(finalRequest),
      new Response(JSON.stringify(response), { status: status })
    );
  }

  private prettyPrint(json: any) {
    return JSON.stringify(json, null, 2);
  }

  public clear() {
    this.mocks.clear();
  }

  private init() {
    jest
      .spyOn(global, "fetch")
      .mockImplementation((input: RequestInfo | URL, init?: RequestInit) => {
        const request = {
          input,
          init
        };
        return new Promise((resolve, reject) => {
          let response = this.mocks.get(JSON.stringify(request));
          if (response) {
            resolve(response);
          } else {
            // rejecting here will hurt component initialization
            console.error(
              `mock not implemented :::\nrequest ${this.prettyPrint(request)}`
            );
            // return empty response
            resolve(new Response("{}"));
          }
        });
      });
  }
  public static initialize() {
    let resolver = new FetchResolver();
    resolver.stub(
      "http://localhost:8080/endpoint",
      "post",
      { id: 100 },
      {
        created: true
      },
      200
    );
    fetch("http://localhost:8080/endpoint", {
      method: "post",
      body: JSON.stringify({ id: 100 })
    }).then((response) => {
      if (response.ok) {
        response.text().then((text) => {
          console.log(text); // { created: true }
        });
      }
    });
  }
}

Blalock

Answer 3

The question has been asked in past. I prefer to use library like https://github.com/jefflau/jest-fetch-mock

The library is flexible and has lot of options.

Cenesthesia