使用 jest 测试 RTK 查询时出现 fetchMock 错误（react Vite.js）

Question

只是尝试模拟商店，然后使用 fetchMock 测试请求，但收到此错误：

\n

您可以在以下位置查看完整的存储库：\n https://github.com/alibidjandy/layered-architecture

\n

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

\n

\xe2\x97\x8f 控制台

\n

console.warn\n  Warning: `fetch` is not available. Please supply a custom `fetchFn` property to use `fetchBaseQuery` on SSR environments.\n\n   7 |   reducerPath: "productService",\n   8 |   tagTypes: ["product"],\n>  9 |   baseQuery: fetchBaseQuery({\n     |                            ^\n  10 |     baseUrl: serviceURL,\n  11 |   }),\n  12 |   endpoints: (builder) => ({}),\n\n  at fetchBaseQuery (node_modules/@reduxjs/toolkit/src/query/fetchBaseQuery.ts:180:13)\n  at Object.<anonymous> (src/app/main/data/api/service.ts:9:28)\n  at Object.<anonymous> (src/app/main/data/api/store.ts:3:1)\n

\n

FAIL src/app/components/products/ tests /products -requests.test.tsx\n\xe2\x97\x8f 测试套件运行失败

\n

src/app/components/products/__tests__/products-requests.test.tsx:14:3 - error TS2304: Cannot find name \'fetchMock\'.\n\n14   fetchMock.resetMocks();\n     ~~~~~~~~~\nsrc/app/components/products/__tests__/products-requests.test.tsx:24:5 - error TS2304: Cannot find name \'fetchMock\'.\n\n24     fetchMock.mockResponse(JSON.stringify(dummyProducts));\n       ~~~~~~~~~\nsrc/app/components/products/__tests__/products-requests.test.tsx:41:5 - error TS2304: Cannot find name \'fetchMock\'.\n\n41     fetchMock.mockReject(new Error("Internal Server Error"));\n       ~~~~~~~~~\nsrc/app/components/products/__tests__/products-requests.test.tsx:61:5 - error TS2304: Cannot find name \'fetchMock\'.\n\n61     fetchMock.mockResponse(JSON.stringify(dummyProducts));\n       ~~~~~~~~~\nsrc/app/components/products/__tests__/products-requests.test.tsx:85:5 - error TS2304: Cannot find name \'fetchMock\'.\n\n85     fetchMock.mockReject(new Error("Internal Server Error"));\n       ~~~~~~~~~\n

\n

失败 src/app/main/ tests /service.test.ts (15.706 s)\n\xe2\x97\x8f getProductById \xe2\x80\xba 请求正确

\n

expect(jest.fn()).toBeCalledTimes(expected)\n\nExpected number of calls: 1\nReceived number of calls: 0\n\n  20 |       .dispatch<any>(getProducts.initiate(undefined))\n  21 |       .then(() => {\n> 22 |         expect(fetchMock).toBeCalledTimes(1);\n     |                           ^\n  23 |         const { method, url } = fetchMock.mock.calls[0][0] as Request;\n  24 |\n  25 |         expect(method).toBe("GET");\n\n  at src/app/main/__tests__/service.test.ts:22:27\n

\n

\xe2\x97\x8f getProductById \xe2\x80\xba 响应失败

\n

TypeError: Cannot read property \'error\' of undefined\n\n  51 |         const {\n  52 |           status,\n> 53 |           error: { error },\n     |                    ^\n  54 |           isError,\n  55 |         } = action;\n  56 |         expect(status).toBe("rejected");\n\n  at src/app/main/__tests__/service.test.ts:53:20\n

\n

\xe2\x97\x8f getProductById \xe2\x80\xba 请求正确

\n

expect(jest.fn()).toBeCalledTimes(expected)\n\nExpected number of calls: 1\nReceived number of calls: 0\n\n  69 |       .dispatch<any>(getProductById.initiate(dummyProduct.id))\n  70 |       .then(() => {\n> 71 |         expect(fetchMock).toBeCalledTimes(1);\n     |                           ^\n  72 |         const request = fetchMock.mock.calls[0][0] as Request;\n  73 |         const { method, url } = request;\n  74 |\n\n  at src/app/main/__tests__/service.test.ts:71:27\n

\n

\xe2\x97\x8f getProductById \xe2\x80\xba 响应失败

\n

TypeError: Cannot read property \'error\' of undefined\n\n  102 |         const {\n  103 |           status,\n> 104 |           error: { error },\n      |                    ^\n  105 |           isError,\n  106 |         } = action;\n  107 |         expect(status).toBe("rejected");\n\n  at src/app/main/__tests__/service.test.ts:104:20\n

\n

测试套件: 2 次失败，1 次通过，总共 3 次\n测试: 4 次失败，3 次通过，总共 7 次\n快照: 总共 0 个\n时间: 17.642 秒\n运行所有测试套件。

\n

Answer 1

安装whatwg-fetch

安装后，将其添加import 'whatwg-fetch';到文件的开头（第 1 行）。测试您正在使用的