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

Question

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

但我从未对 jQuery 代码进行过单元测试，我什至不知道从哪里开始测试这个极其简单的 "Hello, world!" 应用程序：

import * as $ from 'jquery';

export interface SampleInterface {
  stuff: string;
}

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

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

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

更新：

我想通过以下不太有效的测试，我越来越接近我想做的事情了：

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

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

Answer 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!');
  });
});

更新:

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

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

How would I unit test this simple jQuery code with karma/jasmine?

jquery

unit-testing

jasmine

typescript

karma-webpack