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

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.

Answer 1

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

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';