从Jest迁移至Vitest时出现ReferenceError: DOMParser未定义错误

问题原因 #

Vitest默认使用Node.js作为测试环境，而DOMParser是浏览器专属的API，Node.js环境里没有内置这个对象，所以运行测试时会抛出未定义的错误。

解决方案 #

1. 全局配置jsdom环境 #

修改你的Vitest配置文件（vitest.config.ts 或 vite.config.ts 中的test字段），将测试环境设置为jsdom，它会模拟浏览器环境并提供DOMParser等浏览器API：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom',
  },
});

2. 为单个测试文件指定环境 #

如果只需要某几个测试文件使用浏览器环境，可以在对应测试文件的顶部添加注释：

/* vitest-environment jsdom */

3. 手动模拟DOMParser（不推荐全局使用） #

如果不想全局启用jsdom，也可以在测试文件或Vitest的setup文件中手动模拟DOMParser，前提是先安装jsdom依赖：

npm install jsdom --save-dev

然后添加模拟代码：

import { JSDOM } from 'jsdom';

global.DOMParser = new JSDOM().window.DOMParser;

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