两次运行相同的测试时，茉莉花失败

Question

在这种情况下，代码可以正常工作，但是当我两次运行相同的测试时，它失败了，我也不知道为什么。 看起来在beforeEach（）中我没有意识到一个陷阱。

分别运行两个beforeEach。 顶部“描述”的第一个中的一个，前一个“描述”中的下一个。

有人知道这是什么问题吗？

describe("[data-add-selected].click()", function () {
  var option;

  beforeEach(function () {
    initialize();
    option = container.find('.source .option:last');
    option.addClass('selected');
    container.find('[data-add-selected]').click();
  });

  it("this succeeds", function () {
    expect(source.getOptions().length).toEqual(1);
    expect(destination.getOptions().length).toEqual(2);
  });

  it("this FAILS", function () {
    expect(container.find('.source .option').length).toEqual(1);
    expect(container.find('.destination .option').length).toEqual(2);
  });
});

这是正在进行的工作（可在浏览器上运行，但在测试中失败）。

TIA。

Answer 1

根据您提供的要点以及您以各种方式操纵测试时对测试行为的评论，最可能的原因是您两次使用相同的id 。

这是来自beforeEach块的一行：

container = $('<div id="container" />');

您创建一个id为“ container”的div 。 现在问题出在这里：

$('body').append(container).append(sourceElement).append(destinationElement);
container = $('#container');

第一次测试后，一切都很好，因为体内只有一个“容器”。 但是，当您运行第二个测试，并因此再次运行beforeEach块时，另一个“容器”将附加到主体上。 现在，有2个div元素的id “ container”，并且查询选择器的行为未定义。

一个好的解决方案是添加一个afterEach块，在测试后在其中进行清理-在这种情况下，请删除容器。

afterEach(function () {
    $('#container').remove();
});