正如摘要所述，当你在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 实例。 选择哪种方法取决于你的具体需求和测试环境。 在选择解决方案时，请仔细评估每种方法的优缺点，并选择最适合你的情况的方法。
