如何使用 Gulp、Jasmine 和 NodeJS 测试我的 jQuery 插件？

我创建了一个简单的 jQuery 插件 https://github.com/yegor256/colorizejs/blob/master/gulpfile.js，它使用 jQuery 根据一些简单的规则修改 HTML。现在我需要测试它是否有效。我使用 Gulp 来实现自动化构建。我决定使用 Jasmine 进行单元测试。我的问题是如何从test.js并验证结果？我在构建服务器上安装了node.js。

Solution

Use jsdom模拟您的浏览器Jasmine单元测试。

Details

jsdom https://github.com/jsdom/jsdom#--------jsdom是“许多 Web 标准的纯 JavaScript 实现...与 Node.js 一起使用...模拟 Web 浏览器的足够子集，以用于测试和抓取真实世界的 Web 应用程序”。

jsdom已成为模拟浏览器的事实上的标准Node.js。它有每周 npm 下载量超过 200 万次 https://www.npmjs.com/package/jsdom并且，除其他外，自动包含为默认测试环境在Jest https://jestjs.io/docs/en/configuration.html#testenvironment-string.

jsdom提供了window需要初始化 jQuery、加载 jQuery 插件并使用它进行单元测试Jasmine从内部Node.js就像在浏览器中运行一样：

colorize-spec.js

const { JSDOM } = require('jsdom');
const { window } = new JSDOM();
global.$ = require('jquery')(window);
require('../src/colorize');

describe('colorize', () => {

  const div = $('<div/>');
  const settings = { 30: 'highest', 20: 'middle', 10: 'lowest' };

  it('should set the applicable class', () => {
    div.text('35').colorize(settings);
    expect(div.attr('class')).toBe('highest');

    div.text('25').colorize(settings);
    expect(div.attr('class')).toBe('middle');

    div.text('15').colorize(settings);
    expect(div.attr('class')).toBe('lowest');

    div.text('5').colorize(settings);
    expect(div.attr('class')).toBe('');
  });

});

我创建了一个拉取请求 https://github.com/yegor256/colorizejs/pull/2包括jsdom作为开发依赖项，颠簸node到 v8 中Travis CI，并包括这个初始单元测试。它通过了构建检查（包括此单元测试）并准备好合并。