使用Jest测试MutationObserver
我写了一个脚本，主要目的是向一些表格的单元格中添加新元素。
这个测试就是这样完成的：
document.body.innerHTML = `
<body>
<div id="${containerID}">
<table>
<tr id="meta-1"><td> </td></tr>
<tr id="meta-2"><td> </td></tr>
<tr id="meta-3"><td> </td></tr>
<tr id="no-meta-1"><td> </td></tr>
</table>
</div>
</body>
`;
const element = document.querySelector(`#${containerID}`);
const subject = new WPMLCFInfoHelper(containerID);
subject.addInfo();
expect(mockWPMLCFInfoInit).toHaveBeenCalledTimes(3);当调用mockWPMLCFInfoInit时，它会告诉我元素已添加到单元格中。
代码的一部分是在向表中添加新行时使用MutationObserver再次调用mockWPMLCFInfoInit：
new MutationObserver((mutations) => {
mutations.map((mutation) => {
mutation.addedNodes && Array.from(mutation.addedNodes).filter((node) => {
console.log('New row added');
return node.tagName.toLowerCase() === 'tr';
}).map((element) => WPMLCFInfoHelper.addInfo(element))
});
}).observe(metasTable, {
subtree: true,
childList: true
});WPMLCFInfoHelper.addInfo是mockWPMLCFInfoInit的真实版本(当然，这是一个模拟的方法)。
从上面的测试中，如果添加类似这样的内容...
const table = element.querySelector(`table`);
var row = table.insertRow(0);console.log('New row added');永远不会被调用。为了确定，我还尝试在新行中添加所需的单元格。
当然，手动测试告诉我代码是可以工作的。
环顾四周，我的理解是MutationObserver和there is no plan to support it是不受支持的。
很合理，但是在这种情况下，我如何测试这部分代码呢？除了手动，也就是:)
回答 7
Stack Overflow用户
发布于 2018-05-31 22:03:49
我知道我来晚了，但是在我的jest设置文件中，我简单地添加了以下模拟MutationObserver类。
global.MutationObserver = class {
constructor(callback) {}
disconnect() {}
observe(element, initObject) {}
};这显然不允许您测试观察者是否做了您想要做的事情，但将允许您的代码的其余测试运行，这是通向有效解决方案的路径。
Stack Overflow用户
发布于 2019-09-14 16:17:57
这个问题实际上是因为JSDom不支持MutationObserver而出现的，所以你必须提供一个合适的polyfill。
一些微妙的想法可能不是最好的解决方案(让我们使用与IE9-10兼容的库)。
- 你可以像这样的开源项目https://github.com/webmodules/mutation-observer，它代表了类似的逻辑
- 导入到你的测试文件，并使全局
第1步(将此库安装到devDependencies)
npm install --save-dev mutation-observer第2步(导入并设置为全局)
import MutationObserver from 'mutation-observer'
global.MutationObserver = MutationObserver
test('your test case', () => {
...
})Stack Overflow用户
发布于 2019-12-06 17:22:10
您可以使用mutationobserver-shim。
在setup.js中添加此内容
import "mutationobserver-shim"并安装
npm i -D mutationobserver-shimhttps://stackoverflow.com/questions/48809753
复制相似问题
腾讯云开发者
