JSDOM中MutationObserver报错解决方法

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《JSDOM中MutationObserver报错解决方法》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

正如摘要所述，当你在JSDOM中使用MutationObserver时，可能会遇到一个令人困惑的错误：“TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'”。 即使你确信传递给observe方法的参数是一个有效的DOM节点，该错误仍然可能出现。这通常是因为存在多个JSDOM实例，导致MutationObserver和DOM节点来自不同的JSDOM环境。

问题根源：多个JSDOM实例

在Jest测试环境中，jest-environment-jsdom 会自动创建一个全局的JSDOM实例。同时，你的测试代码可能又显式地创建了另一个JSDOM实例（例如，通过 new JSDOM()）。

当你在测试中使用 new MutationObserver() 时，它会默认使用全局的JSDOM实例。但是，你传递给 observe 方法的DOM节点可能来自你显式创建的JSDOM实例。由于JSDOM不允许跨实例操作节点，因此会抛出上述错误。

解决方案：确保MutationObserver和DOM节点来自同一实例

解决这个问题的关键在于确保你使用的 MutationObserver 和DOM节点都来自同一个JSDOM实例。以下是几种可能的解决方案：

1. 使用JSDOM实例的MutationObserver

最直接的解决方案是将 MutationObserver 的创建与特定的JSDOM实例关联起来。例如，如果你创建了一个名为 dom 的JSDOM实例，那么你应该使用 new dom.window.MutationObserver() 来创建 MutationObserver。

修改后的代码示例：

import { JSDOM } from 'jsdom';
import fs from 'fs';
import path from 'path';

const html = fs.readFileSync(path.resolve(__dirname, '../index.html'), 'utf8');

let dom;
let container;

function waitForElm(dom, parentElm, selector) { // 传递dom实例
  return new Promise(resolve => {
    if (parentElm.querySelector(selector)) {
      return resolve(parentElm.querySelector(selector));
    }

    const observer = new dom.window.MutationObserver(mutations => { // 使用dom实例的MutationObserver
      if (parentElm.querySelector(selector)) {
        resolve(parentElm.querySelector(selector));
        observer.disconnect();
      }
    });

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

describe('index.html', () => {
  beforeEach(() => {
    dom = new JSDOM(html, { runScripts: 'dangerously', resources: "usable" });
  })

  it('adds a tag', async () => {
    container = dom.window.document.body.querySelector("#app-root");
    const elm = await waitForElm(dom, container, '.my-embed'); // 传递dom实例
    expect(container.querySelector('.my-embed')).not.toBeNull();
  });
});

在这个示例中，我们将 dom 实例传递给 waitForElm 函数，并在 waitForElm 函数中使用 dom.window.MutationObserver 创建 MutationObserver。这样可以确保 MutationObserver 和 parentElm 都来自同一个JSDOM实例。

注意事项：

• 这种方法需要你将JSDOM实例（或者至少是它的 window 对象）传递给所有需要使用 MutationObserver 的函数。

2. 使用全局的JSDOM实例

另一种解决方案是始终使用全局的JSDOM实例，并避免显式创建新的JSDOM实例。你可以通过 document 对象访问全局JSDOM实例。

修改后的代码示例：

import '@testing-library/jest-dom/extend-expect';
import fs from 'fs';
import path from 'path';

const html = fs.readFileSync(path.resolve(__dirname, '../index.html'), 'utf8');

//  不再显式创建 JSDOM 实例
// let dom;
let container;

function waitForElm(parentElm, selector) {
  return new Promise(resolve => {
    if (parentElm.querySelector(selector)) {
      return resolve(parentElm.querySelector(selector));
    }

    const observer = new MutationObserver(mutations => {
      if (parentElm.querySelector(selector)) {
        resolve(parentElm.querySelector(selector));
        observer.disconnect();
      }
    });

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

describe('index.html', () => {
  beforeEach(() => {
    //不再使用 new JSDOM，直接修改全局 document
    document.documentElement.innerHTML = html;
    // 或者使用 document.write(html);
    // dom = new JSDOM(html, { runScripts: 'dangerously', resources: "usable" });
  })

  it('adds a tag', async () => {
    container = document.body.querySelector("#app-root");
    const elm = await waitForElm(container, '.my-embed');
    expect(container.querySelector('.my-embed')).not.toBeNull();
  });
});

在这个示例中，我们不再显式创建JSDOM实例，而是直接修改全局的 document 对象的内容。 我们使用document.documentElement.innerHTML = html; 将HTML内容写入全局的JSDOM实例中。 这样，所有的DOM操作都将在同一个JSDOM实例中进行。

注意事项：

• 这种方法可能会影响其他测试用例，因为你正在修改全局状态。 因此，在使用这种方法时，请确保在每个测试用例之前重置全局状态。
• 使用 document.write() 或 document.documentElement.innerHTML = ... 设置HTML内容可能会导致一些副作用，例如重新加载脚本。你需要仔细评估这些副作用是否会影响你的测试结果。

总结

MutationObserver 在 JSDOM 中报错“参数1不是Node类型”通常是由于多个JSDOM实例引起的。为了解决这个问题，你需要确保 MutationObserver 和 DOM 节点都来自同一个 JSDOM 实例。 你可以选择使用 JSDOM 实例的 MutationObserver，或者始终使用全局的 JSDOM 实例。 选择哪种方法取决于你的具体需求和测试环境。 在选择解决方案时，请仔细评估每种方法的优缺点，并选择最适合你的情况的方法。

理论要掌握，实操不能落！以上关于《JSDOM中MutationObserver报错解决方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！