0

我正在尝试测试一个调用 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 使用效果：

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 代码中的错字

4

1 回答 1

2

好的，所以，我终于想出了一个解决方案。

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

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

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

于 2021-11-08T11:13:07.357 回答