Question

我正在创建一个webpack starter应用程序，以支持轻量级的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，我还没有得到线索。

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代码进行单元测试？

1 个答案: