jestjs - 用Jest测试MutationObserver-6ren

jestjs - 用Jest测试MutationObserver

转载作者：行者123 更新时间：2023-12-03 23:18:44

27

4

我编写了一个脚本，其主要目的是向某些表格的单元格添加新元素。

测试是通过类似这样的方式完成的:

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。

足够公平，但是在这种情况下，如何测试代码的这一部分？除了手动，就是:)

最佳答案

我知道我在这里参加聚会很晚，但是在我的jest设置文件中，我只是添加了以下模拟MutationObserver类。

global.MutationObserver = class {
    constructor(callback) {}
    disconnect() {}
    observe(element, initObject) {}
};

显然，这不允许您测试观察者是否做了您想要的事情，但是将允许其余代码测试运行，这是可行的解决方案的路径。

关于jestjs - 用Jest测试MutationObserver，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48809753/

27

4

0

文章推荐： c-preprocessor - 延迟宏扩展

文章推荐： events - 如何在 Magento 中调试我的事件观察器？

文章推荐： twitter-bootstrap - NPM WARN : bootstrap@4. 0.0 需要 popper.js 的同级

文章推荐： regex - 在 vim 中自动检测 python 3 文件

reactjs - jest 中的 jest.fn() 和 jest.spyOn() 方法有什么区别？
我正在为我的 react 项目编写单元测试用例，并使用 Jest 和 enzyme 来编写测试用例。我已阅读 Jest 文档 https://jestjs.io/docs/en/jest-object
reactjs - REACT JEST 错误无法从 'jest-matchers' 找到模块 'jest-expect.js'
运行测试时出现以下错误: 无法从“jest-expect.js”中找到模块“jest-matchers” at Resolver.resolveModule (node_modules/jest-
jestjs - 使用 jest.run() 或 jest.runCLI() 运行所有测试或以编程方式运行 jest 的方法
如何使用 jest.run() 或 jest.runCLI() 以编程方式运行所有测试？我应该用什么作为论据？我试图找到有关它们的文档但失败了。如果上述函数不起作用，如果我想以编程方式运行 jes
reactjs - Jest jest.mock函数具有不同的返回值
用 Jest 和 enzyme 测试 react 和 typescript ，我如何模拟这个 ExpectsVideo 函数，以便我可以根据我的测试用例场景定义它是否返回 true 或 false j
reactjs - Jest jest.mock函数具有不同的返回值
用 Jest 和 enzyme 测试 react 和 typescript ，我如何模拟这个 ExpectsVideo 函数，以便我可以根据我的测试用例场景定义它是否返回 true 或 false j
jestjs - Jest 模式 ""- 0 个匹配(从 jest 19 -> jest 20 移动)
我正在使用以下 jest.unittest.json 文件(通过 jest --config 选项使用): { "bail": false, "verbose": true, "trans
javascript - Jest js node_modules\jest\node_modules\jest-cli\build\cli\index.js :227 } catch {
我跑npm init npm i -D jest像这样 tutorial 运行推荐 nmp test 后出现此错误这不是生物.js 或生物.test.js 的错误，因为没有发生此文件错误。我怎样才能
javascript - jest mockgoose - jest 在测试运行完成后一秒钟没有退出
我有一个 Mongoose 模型: var mongoose = require("mongoose"); var transactionSchema = mongoose.Schema({ ca
jestjs - 试图运行 jest 的 jest 版本不正确
我在我的角度项目中进行了 Jest 测试。我有一个 package.json 文件指定了我想用来运行测试的 jest 版本。该文件包括: "@types/jest": "^24.0.18", "je
reactjs - Jest 类型错误 : is not a constructor in Jest. 模拟
我正在尝试使用 jest 编写单元测试用例，并且需要模拟以下模式。我收到 TypeError: is not a constructor。用例:我的用例如下所述我的组件.js : import
mongoose - jest 和 mongoose - jest 检测到打开的句柄
所以我正在使用 jest测试我的 node.js 应用程序，测试完成得很好，但我从 jest 收到一条关于打开句柄的消息。任何见解？ jest --detectOpenHandles 通过 src/l
jestjs - Jest - 如何在 babel-jest 中使用根斜杠导入？
我正在使用 Babel Jest 来转换我的代码以进行测试。我不知道如何使用相对于项目根目录的路径。例如，如果我在一个测试文件中导入一个模块:/imports/ui/myModule Jest 抛
javascript - Jest 覆盖率测试报告的准确性如何？ Jest 测试覆盖率是如何计算的？我应该如何分析覆盖率结果？
我正在致力于更新 Express 微服务的测试。对于某些目录(即我们的 /utils 文件夹)，我编写了大量测试，显示覆盖率达到 80-90%。在/routes目录下，有0个测试，但显示100%。总
javascript - 如何为特定文件夹配置 Jest 和 babel-jest
我收到以下错误: import React from 'react'; ^^^^^^ SyntaxError: Unexpected token import 原因是一些模块/s在npm中发布时没有编
javascript - Jest 模拟和错误处理 - Jest 测试跳过我函数的 "catch"
我正在创建一个 Jest 测试来测试是否记录了用于 superFetch 函数错误处理的指标。我的方法是为 retryFetch 创建一个模拟函数并返回一个 Promise 拒绝事件。我希望它能进入
javascript - 如何在 jest 的覆盖范围内忽略由 jest 生成的快照？
我正在设置一些新的配置来开 Jest ，我忽略了一些文件，比如 *.stories.js，但是当我使用 *.js.snap 或 *.snap，这个 Jest 不太行。我正在使用 react-scri
reactjs - Jest 遇到意外标记，因为试图导入 Jest 无法解析的文件
PS E:\react\Code\UI> yarn 测试 yarn 运行 v1.17.3$开 Jest 失败 src/App.test.js ● 测试套件运行失败 Jest encountered a
reactjs - 开 Jest jest.fn 它正在被调用，但期望失败
我是开 Jest 测试的新手，我写了下面的测试。我 Jest mock 了一个函数并将其作为参数传递。但是当运行测试时，在日志中我可以看到函数 onSuccess 被调用。但 expect 失败并出现
javascript - Jest 检测到以下 2 个打开的句柄可能会阻止 Jest 退出 :
我是测试新手。我正在使用 JEST 来测试我的 nodejs API。当我在一个文件中编写所有测试时，它可以正常运行，没有任何错误，但是当我分离它时，它给我的端口已经在使用中。至于每个文件，它运行不同
javascript - jest.mock 中的 Jest 'TypeError: is not a function'
我正在编写一个 Jest 模拟，但是在模拟本身之外定义一个模拟函数时我似乎遇到了问题。我有一个类: myClass.js class MyClass { constructor(name) {

首页

博学

6Ren·AI

商城

jestjs - 用Jest测试MutationObserver