如何用JSDOM在Jest测试用例中Mock document.documentElement？

核心思路 #

你已经配置JSDOM作为测试环境，无需手动创建新文档对象——JSDOM会在测试启动时自动在全局作用域注入document和window对象，直接修改这个全局对象的根元素属性即可。

测试用例实现 #

基础场景测试 #

import { getLang } from './langutils.ts';

test('返回正确的lang属性值', () => {
  // 直接修改全局document的根元素lang属性
  document.documentElement.setAttribute('lang', 'en');
  
  expect(getLang()).toEqual('en');
});

多场景隔离测试 #

如果需要覆盖lang属性不存在的场景，可通过beforeEach重置状态，避免测试间互相干扰：

import { getLang } from './langutils.ts';

describe('getLang函数测试', () => {
  // 每个测试前重置document的lang属性状态
  beforeEach(() => {
    document.documentElement.removeAttribute('lang');
  });

  test('当lang属性存在时返回对应值', () => {
    document.documentElement.setAttribute('lang', 'zh-CN');
    expect(getLang()).toEqual('zh-CN');
  });

  test('当lang属性不存在时返回null', () => {
    expect(getLang()).toBeNull();
  });
});

关键注意事项 #

• 不要用Object.assign修改documentElement，直接使用DOM标准方法setAttribute/removeAttribute操作属性才是正确方式
• 若测试后需要彻底清理状态，可在afterEach中重置属性或直接替换documentElement
• JSDOM提供的全局document完全模拟浏览器环境，你的getLang函数会自动使用它，无需额外配置

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