DOMParser.parseFromString在应用与测试中返回结果不一致问题排查

问题根源 #

• Vitest默认使用jsdom模拟浏览器DOM环境，jsdom的XML解析逻辑和真实浏览器存在差异，当XML缺少标准声明、存在命名空间或格式不规范时，会返回包含<parsererror>的空白文档，但不会主动抛出异常。
• 你mock的XML可能在jsdom环境中触发了解析错误，但原函数未做错误检测，导致返回的documentElement为空，自然无法找到snapshot元素。

解决方案 #

1. 补全XML标准声明 #

确保mock返回的XML开头包含标准声明，这是jsdom正确解析XML的必要前提：

<?xml version="1.0" encoding="UTF-8"?>

2. 添加解析错误检测 #

修改fetchXML函数，增加解析错误检测逻辑，避免静默失败：

export async function fetchXML(url: string): Promise<Element> {
  const req = await fetch(url, { headers: { "content-type": "application/xml" } })
  const xml = await req.text()
  const doc = new DOMParser().parseFromString(xml, "application/xml")
  
  // 检测解析错误
  const parserError = doc.querySelector("parsererror")
  if (parserError) {
    throw new Error(`XML解析失败: ${parserError.textContent?.trim()}`)
  }
  
  return doc.documentElement
}

3. 配置Vitest的jsdom环境 #

在vite.config.ts中调整测试配置，让jsdom更接近真实浏览器的XML处理逻辑：

export default defineConfig({
  test: {
    environment: "jsdom",
    jsdom: {
      resources: "usable", // 确保XML解析的完整性
    },
    globals: true,
  },
})

4. 规范测试中的mock逻辑 #

确保mock的Response对象正确设置Content-Type头，避免jsdom误判内容类型：

import { fetchXML } from "./fetchXML"

// 模拟fetch请求
vi.mock("node-fetch", () => ({
  default: vi.fn(() => 
    Promise.resolve({
      text: () => Promise.resolve(`<?xml version="1.0" encoding="UTF-8"?>
<root>
  <snapshot id="test-snap"></snapshot>
</root>`),
      headers: new Headers({ "Content-Type": "application/xml" }),
    })
  ),
}))

test("fetchXML能正确解析snapshot元素", async () => {
  const root = await fetchXML("test-url")
  const snapshot = root.querySelector("snapshot")
  
  expect(snapshot).not.toBeNull()
  expect(snapshot?.getAttribute("id")).toBe("test-snap")
})

5. 替换为真实XML解析库（终极方案） #

如果jsdom的解析差异无法解决，直接使用xmldom库提供的DOMParser替代jsdom的模拟，确保和生产环境解析逻辑完全一致：

1. 安装依赖：

npm install xmldom --save-dev

2. 在测试文件顶部覆盖全局DOMParser：

import { DOMParser } from "xmldom"
globalThis.DOMParser = DOMParser

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