我将如何使用 karma/jasmine 对这个简单的 jQuery 代码进行单元测试？答案

【问题标题】：How would I unit test this simple jQuery code with karma/jasmine?我将如何使用 karma/jasmine 对这个简单的 jQuery 代码进行单元测试？
【发布时间】：2018-05-20 18:46:33
【问题描述】：

我正在创建一个 webpack 入门应用程序以支持轻量级 Typescript 和 jQuery 开发。到目前为止，它运行良好，可以做所有我希望它做的很酷的事情，比如自动检测编辑、在您更改内容时重建和重新启动应用程序等。它还支持单元和 e2e 测试。

但我从来没有对 jQuery 代码进行单元测试，我什至不知道从哪里开始测试这个死气沉沉的“你好，世界！”应用：

import * as $ from 'jquery';

export interface SampleInterface {
  stuff: string;
}

$('#message').text('Hello, world!');

确保已设置此消息的单元测试是什么样的？

我已经安装了karma-jquery 和karma-jasmine-jquery。我在谷歌上搜索了很多关于如何使用这些工具的示例，但我所看到的没有一个与我试图解决的简单问题相匹配。

更新：

我想我越来越接近我想要做的以下测试了：

describe('main', () => {
  it('should say hello', () => {
    spyOn(jQuery.prototype, 'text').and.callThrough();
    require('./main');
    expect(jQuery.prototype.text).toHaveBeenCalledWith('Hello, world!');
  });
});

这不起作用并不让我感到惊讶，因为它监视 jQuery 原型方法，而我认为我需要监视的是特定的 jQuery 对象，但是如何创建它并监视它以便它与选择器 #message 一起使用，我还没有得到任何线索。

【问题讨论】：

见stackoverflow.com/a/36356692/3731501
@estus，这个例子帮助了一些人，但我仍然不确定如何测试这个具体案例。我是否必须将 $('#message').text('Hello, world!'); 包装在一个函数中，以便我可以单独调用它来测试它？
是的，它是可取的，但如果它没有包装在原始应用程序中，它不会被包装。在这种情况下，您需要在导入测试文件之前监视 $，因此您需要在测试中使用 import 而不是 require('.../app') 导入它。
我正在尝试require('./main')，我的编辑对此很满意，甚至可以自动完成，但是当我尝试运行测试时，我收到了Error: Cannot find module "./main"。
我通过了找不到模块的问题，现在有一个运行但失败的测试，我将作为更新添加到我的问题中。

标签： jquery unit-testing typescript jasmine karma-webpack

【解决方案1】：

我终于偶然发现创建了一个有效的测试：

describe('main', () => {
  let jqdiv;

  beforeEach(() => {
    const div = document.createElement('div');
    div.setAttribute('id', 'message');
    document.body.appendChild(div);
    jqdiv = $(div);
  });

  afterEach(() => {
    jqdiv.remove();
  });

  it('should say hello', () => {
    require('./main');
    expect(jqdiv.text()).toBe('Hello, world!');
  });
});

更新：

改进了测试，使其自行清理。

【讨论】：