MSW 与 Jest（困惑）

Posted 2023-02-21

【中文标题】MSW 与 Jest（困惑）

【英文标题】：MSW with Jest (confusion)

【发布时间】：2021-12-21 04:50:46

【问题描述】：

我正在尝试测试一个调用 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 代码中的错字

【参考方案1】：

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

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

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

现在我有了import 'whatwg-fetch';，它按预期工作。

【讨论】：

是的，节点没有开箱即用的fetch()。很有趣，您在 JSON 上看到错误消息，而不是关于 fetch() 错过