如何在不使用外部html文件的情况下在jasmine测试中添加DOM元素？

我正在编写一些简单的jasmine测试，我遇到了一个异常，因为我正在测试的代码正在寻找一个不存在的表单，因为在只测试js文件时没有DOM：

$（“表单”）[0]

，在测试的js文件中导致：

TypeError: $(...)[0] is undefined

我读了一些关于jasmine jquery的文章，意识到我可以使用一些html工具和一个外部html文件。这个流程看起来相当混乱，因为我所需要做的只是添加一个空的有效表单，这样测试（关注其他内容）就可以运行了，我认为像

这样的附加就足够了

起初我认为sandbox（）函数将是解决方案，但它似乎只创建div，我需要一个表单

---

是否可以只使用jasmine spec文件中的代码来添加一些元素？

最简单的解决方案是在before块中自己将表单添加到DOM中，然后在after块中删除它：

describe(function(){
  var form;

  beforeEach(function(){
    form = $('<form>');
    $(document.body).append(form);
  });

  it('your test', function(){


  })

  afterEach(function(){
   form.remove();
   form = null;
  });
});

---

您应该使用sandbox（）创建一个div，创建一个form元素并附加到sandbox中，这是jasmine控制DOM中这个fixture的更安全的方法。

另一种方法是使用

概念

以下是一种思考方法：

在jQuery中，给$（）一个CSS选择器，它在 多姆

在jasmine fixture中，给affix（）一个CSS选择器，它会添加 元素添加到DOM中

这对于测试非常有用，因为这意味着在设置 带词缀的DOM的状态，您的测试主题代码将 具备完成工作所需的要素

最后，茉莉花夹具将通过整理帮助您避免测试污染 在每个等级库运行后，向上移动并移除附加到DOM的所有内容

---

另请参见：

出于某种原因，我认为html附加将无法工作，因为我确信没有DOM，只有javascript。你的回答似乎很琐碎。哦，好吧@安德烈亚斯·科伯林，谢谢你。这修复了我的焦点事件处理程序不触发的问题。沙盒助手是如何调用的？您只是在

descripe（）

块中手动调用它吗？到目前为止，最好的答案是，fixture可以让您像在原始html中一样工作

function sandbox(html){
  var el;

  beforeEach(function(){
    el = $(html);
    $(document.body).append(el);
  });


  afterEach(function(){
   el.remove();
   el = null;
});