ReactJS测试场景下如何mock本地XML文件的fetch请求？

• 响应格式不符合组件处理逻辑
  你的组件拿到fetch响应后，会先调用.text()获取文本内容，再交给XMLParser解析为XML结构，最后经过XMLMapper转换为可用的业务对象。但你当前的MSW handler用ctx.json(data.units)返回JSON格式数据，XMLParser解析JSON字符串会直接报错，逻辑进入catch分支，没有给municipalityData赋值，所以列表没有渲染，自然找不到对应testid的元素。
• 可能存在请求路径不匹配的问题
  你需要确认测试环境下XMLFile变量解析出的完整请求路径，和MSW handler中填写的路径完全一致。如果路径不匹配，MSW就不会拦截对应请求，自然返回不到预期数据。

1. 调整MSW的handler，返回和实际本地XML文件结构一致的XML文本，示例如下：

const server = setupServer(
  rest.get("http://localhost/data.xml", (req, res, ctx) => {
    // 替换为和你实际XML结构一致的字符串，保证XMLMapper可以正常解析出units数组
    const mockXml = `
      <root>
        <unit>
          <BookingURL>https://someurl1.com</BookingURL>
        </unit>
        <unit>
          <BookingURL>https://someurl2.com</BookingURL>
        </unit>
      </root>
    `
    return res(ctx.body(mockXml))
  })
)

2. 确认请求路径完全匹配：如果MSW仍然提示无匹配的请求handler，直接把警告中打印的完整GET路径替换到rest.get的第一个参数即可。
3. （可选）如果单测不需要验证XML解析逻辑，也可以直接mock XMLParser、XMLMapper这两个方法的返回值，跳过XML解析流程直接返回构造好的业务数据。

内容的提问来源于stack exchange，提问作者Webbie