fetchMock error on testing RTK-query with jest (react Vite.js)

Question

just tried to mocked the store then test the request with fetchMock but got this error :

you can check out the full repo on : https://github.com/alibidjandy/layered-architecture

src/app/main/__tests__/main.test.tsx (5.569 s)

● Console

console.warn
  Warning: `fetch` is not available. Please supply a custom `fetchFn` property to use `fetchBaseQuery` on SSR environments.

   7 |   reducerPath: "productService",
   8 |   tagTypes: ["product"],
>  9 |   baseQuery: fetchBaseQuery({
     |                            ^
  10 |     baseUrl: serviceURL,
  11 |   }),
  12 |   endpoints: (builder) => ({}),

  at fetchBaseQuery (node_modules/@reduxjs/toolkit/src/query/fetchBaseQuery.ts:180:13)
  at Object.<anonymous> (src/app/main/data/api/service.ts:9:28)
  at Object.<anonymous> (src/app/main/data/api/store.ts:3:1)

FAIL src/app/components/products/tests/products-requests.test.tsx ● Test suite failed to run

src/app/components/products/__tests__/products-requests.test.tsx:14:3 - error TS2304: Cannot find name 'fetchMock'.

14   fetchMock.resetMocks();
     ~~~~~~~~~
src/app/components/products/__tests__/products-requests.test.tsx:24:5 - error TS2304: Cannot find name 'fetchMock'.

24     fetchMock.mockResponse(JSON.stringify(dummyProducts));
       ~~~~~~~~~
src/app/components/products/__tests__/products-requests.test.tsx:41:5 - error TS2304: Cannot find name 'fetchMock'.

41     fetchMock.mockReject(new Error("Internal Server Error"));
       ~~~~~~~~~
src/app/components/products/__tests__/products-requests.test.tsx:61:5 - error TS2304: Cannot find name 'fetchMock'.

61     fetchMock.mockResponse(JSON.stringify(dummyProducts));
       ~~~~~~~~~
src/app/components/products/__tests__/products-requests.test.tsx:85:5 - error TS2304: Cannot find name 'fetchMock'.

85     fetchMock.mockReject(new Error("Internal Server Error"));
       ~~~~~~~~~

FAIL src/app/main/tests/service.test.ts (15.706 s) ● getProductById › request is correct

expect(jest.fn()).toBeCalledTimes(expected)

Expected number of calls: 1
Received number of calls: 0

  20 |       .dispatch<any>(getProducts.initiate(undefined))
  21 |       .then(() => {
> 22 |         expect(fetchMock).toBeCalledTimes(1);
     |                           ^
  23 |         const { method, url } = fetchMock.mock.calls[0][0] as Request;
  24 |
  25 |         expect(method).toBe("GET");

  at src/app/main/__tests__/service.test.ts:22:27

● getProductById › unsuccessful response

TypeError: Cannot read property 'error' of undefined

  51 |         const {
  52 |           status,
> 53 |           error: { error },
     |                    ^
  54 |           isError,
  55 |         } = action;
  56 |         expect(status).toBe("rejected");

  at src/app/main/__tests__/service.test.ts:53:20

● getProductById › request is correct

expect(jest.fn()).toBeCalledTimes(expected)

Expected number of calls: 1
Received number of calls: 0

  69 |       .dispatch<any>(getProductById.initiate(dummyProduct.id))
  70 |       .then(() => {
> 71 |         expect(fetchMock).toBeCalledTimes(1);
     |                           ^
  72 |         const request = fetchMock.mock.calls[0][0] as Request;
  73 |         const { method, url } = request;
  74 |

  at src/app/main/__tests__/service.test.ts:71:27

● getProductById › unsuccessful response

TypeError: Cannot read property 'error' of undefined

  102 |         const {
  103 |           status,
> 104 |           error: { error },
      |                    ^
  105 |           isError,
  106 |         } = action;
  107 |         expect(status).toBe("rejected");

  at src/app/main/__tests__/service.test.ts:104:20

Test Suites: 2 failed, 1 passed, 3 total Tests: 4 failed, 3 passed, 7 total Snapshots: 0 total Time: 17.642 s Ran all test suites.

Wardle

Answer 1

install whatwg-fetch

after install it add import 'whatwg-fetch'; at the beginning (line 1) of the file.test youre using

Moberg

Answer 2

The test in Jest doesn't run on the browser. It runs on NodeJS. So, you need a polyfill for the "fetch". There are many options on NPM, but some of them haven't worked for me.

The one that worked fine was the cross-fetch: https://www.npmjs.com/package/cross-fetch

It works on browser/NodeJS/Mobile. You just need to add it to package.json (devDependencies) and import it on jest.setup.js file:

import 'cross-fetch/polyfill';

Tortilla

Amazing, whatwg-fetch was not working for me with integration tests that were using supabase storage, but cross-fetch worked – Martingale