MSW 与 Jest（混乱）

Question

我正在尝试测试一个调用 API 的组件，我遇到了 MSW，并认为这会很棒。

const server = setupServer(
    rest.get('http://localhost:3001/vote/test-slug', (req, res, ctx) =>
        res(ctx.delay(500), ctx.status(200), ctx.json({ data: {alreadyVoted: `1`}} )),
    ),
);

这是我设置来处理捕获的服务器。在幕后我使用 fetch 在我的组件中进行 API 调用，它看起来像这样

apiFetchData = (params) => {
   const res = await fetch(url, options);
   const data = (await res.json()) || null;


   const response: fetchJsonResponse = {
        data,
        statusCode: res.status,
        error: res.status !== 200,
        success: res.status === 200,
    };
}

我的组件有一个 onload useeffect，如下所示：

const component = () => {
   useEffect(() => {
     async function voteCheck() {
            const result = await apiFetchData(
                'http://localhost:3001/vote/test-slug',
            );
            if (result.data.alreadyVoted) {
                setHasUserVoted(result.data.alreadyVoted);
            }
            setLoading(false);
        }
        voteCheck();
   }, []);
}

当我运行测试时

await act(async () => {
   render(
     <VoteButton />,
   );
});

我从 apiFetchData 收到以下错误

UseEffect result {
      data: {
        error: 'invalid json response body at  reason: Unexpected end of JSON input'
      },
      hasData: false,
      statusCode: 500,
      error: true,
      errorType: 'application'
    }

（我正在使用 jest-mock-fetch），我得到的结果是这样的

Response {
      size: 0,
      timeout: 0,
      [Symbol(Body internals)]: { body: <Buffer >, disturbed: false, error: null },
      [Symbol(Response internals)]: {
        url: undefined,
        status: 200,
        statusText: 'OK',
        headers: Headers { [Symbol(map)]: [Object: null prototype] },
        counter: undefined
      }
    }

我被卡住了，看来 MSW 正在捕获来自组件的请求，但我得到的响应对于获取似乎 100% 无效，我不知道出了什么问题。任何帮助/提示将不胜感激。

编辑：我的 setupServer 代码中的拼写错误

Answer 1

好的，所以，我终于找到了解决方案。

https://giters.com/mswjs/msw/issues/686发现了这个，它解释了我遇到的同样的问题。变成我们需要“polyfill”获取。（说实话，现阶段不确定这意味着什么）但是在链接到这个示例的评论中，特别是这个 jest.setup ：

https://github.com/mswjs/examples/blob/a8bb071d997a24f3a7f7107cbb414659c22ccc5a/examples/with-jest/jest.setup.js#L2

现在我已经import 'whatwg-fetch';按预期工作了。