使用Jest和Testing Library DOM测试Mutation Observer：测试环境href未更新

问题分析 #

你的代码在浏览器环境正常，但测试中href未更新，核心原因是：

• 你先通过document.body.innerHTML插入了链接，之后才调用add()注册Mutation Observer。此时Observer并未捕获到之前的DOM插入操作（childList突变），所以不会触发处理逻辑。
• Mutation Observer只监听注册之后发生的DOM变更，不会主动处理已存在的DOM元素。

解决方案 #

方案1：调整执行顺序，先注册Observer再插入DOM #

把add()调用放在DOM插入之前，让Observer能捕获到后续的childList变更事件：

it('test', async () => {
    add({id: '123'}); // 先启动Observer
    document.body.innerHTML = '<div><a href="https://google.com">google</a></div>'; // 后插入DOM触发突变
    const link = getByText(document, 'google');
    await waitFor(() => {
      expect(link.href).toBe('https://google.com/?id=123');
    });
});

方案2：优化add()函数，增加初始DOM处理 #

为了兼容已存在的DOM元素，在注册Observer后主动执行一次链接处理逻辑，无需依赖DOM变更事件：

function add(params) {
  // 先处理页面中已存在的链接
  const existingLinks = document.querySelectorAll('a');
  existingLinks.forEach(link => {
    const url = addParams(link.href, params);
    link.setAttribute('href', url);
  });

  const observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      if (mutation.type === 'childList') {
        const newLinks = document.querySelectorAll('a');
        newLinks.forEach(function (link) {
            const url = addParams(link.href, params);
            link.setAttribute('href', url);
          }
        );
      }
    });
  });

  observer.observe(document.body, { childList: true, subtree: true });
}

调整后不管DOM元素是先存在还是后插入，都能被处理，原测试代码无需修改即可正常运行。

额外注意点 #

• 确认addParams函数的实现：要正确处理URL参数拼接（比如原URL已有参数的情况），同时注意link.href返回的是完整标准化URL（例如https://google.com会被自动补全为https://google.com/，断言时要匹配正确格式）。
• 测试中使用waitFor是合理的，因为Mutation Observer的回调是异步执行的。

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