如何使用 jQuery DOM 操作测试 HTML 页面
Posted
技术标签:
【中文标题】如何使用 jQuery DOM 操作测试 HTML 页面【英文标题】：How to test an HTML page with jQuery DOM manipulations 【发布时间】：2019-10-10 07:09:33 【问题描述】：我被要求使用 jQuery DOM 操作开发一个 html 页面 - 例如，当我单击提交按钮时，会显示一条成功/错误消息 - 并对其进行测试。我习惯用 Angular 和 Jasmine 做这样的事情，但我真的不知道如何用普通的 javascript 和 jQuery 来做。
我已经尝试过使用 Jasmine 和 QUnit，但收到以下错误：$ is not defined。
我不想使用 jQuery 来测试页面。我想使用 Jasmine（或类似的测试框架）来测试页面以及 jQuery 操作它的方式。
这是我的一次失败尝试的代码：
it("should display a notification", function ()
const fs = require('fs');
const jsdom = require('jsdom');
const jquery = require('jquery');
fs.readFile('index.html', 'utf8', (err, data) =>
const dom = new jsdom.JSDOM(data);
const $ = jquery(dom.window);
expect($('.notification.is-hidden').length).toBe(1);
$('.button').click();
expect($('.notification.is-hidden').length).toBe(0);
);
);
点击按钮时，jQuery 删除了 is-hidden 类...但第二个 expect 还是失败了，我不知道为什么。
【问题讨论】：
您的页面中是否包含 jquery？ 即使修复了缺失的 jQuery 包括，“如何测试”这个问题也太宽泛了 还有为什么要使用 jQuery 进行测试，而这不是它的用途。测试库 Jasmine 是一种更好的方法。 【参考方案1】：通常$ is not defined 错误是因为您的页面中没有包含 jQuery。
如果不存在，请将 jQuery 添加到 html 文件的 <head> 部分。
示例：
<srcipt src="cdn/link/or/path/to/jQuery.min.js" type="text/javascript"></script>
【讨论】：
以上是关于如何使用 jQuery DOM 操作测试 HTML 页面的主要内容，如果未能解决你的问题，请参考以下文章