1

我正在创建一个 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 原型方法，而我认为我需要监视的是一个特定的 jQuery 对象，但是如何创建它并监视它以便它与选择器一起工作#message，我还没有线索。

4

1 回答 1

3

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

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

更新：

改进了测试，以便它自行清理。

于 2018-05-21T01:56:44.380 回答