如何使用 jQuery DOM 操作测试 HTML 页面答案

【问题标题】：How to test an HTML page with jQuery DOM manipulations如何使用 jQuery DOM 操作测试 HTML 页面
【发布时间】：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 是一种更好的方法。

标签： javascript jquery html npm

【解决方案1】：

通常$ is not defined 错误是因为您的页面中没有包含 jQuery。如果不存在，请将 jQuery 添加到 html 文件的 <head> 部分。示例：

<srcipt src="cdn/link/or/path/to/jQuery.min.js" type="text/javascript"></script>

【讨论】：