jquery - 我如何使用 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。我在谷歌上搜索了很多关于如何使用这些工具的示例，但我所看到的没有一个与我试图解决的简单问题相匹配。

更新:

我认为我越来越接近我想要做的以下测试，但不太有效:

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

这不起作用并不让我感到惊讶，因为它监视的是 jQuery 原型(prototype)方法，而我认为我需要监视的是特定的 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!');
  });
});

更新:

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