javascript - 使用 mocha javascript 时如何模拟 dom 元素？

Question

我正在使用 mocha 来测试我的 JavaScript 代码。代码涉及html和css，实现了一个聊天应用。据我所知，Mocha 可以通过将期望值与函数的返回值相匹配来测试 JavaScript 函数。

但是如果我想测试不返回值的函数怎么办？主要处理 DOM 元素的函数。 (例如附加图像)。

我怎样才能在 mocha 中模拟 DOM 元素，然后测试该函数是否成功生成了适当的 DOM 元素？

我环顾四周，发现可以使用 selenium webdriver 和 jsdom。是否可以使用 单独使用 mocha 而不使用其他附加接口(interface)来进行此测试？

Answer 1

JSDOM 很方便，因为它允许您针对“真实的”DOM 实现进行测试，而无需在 Web 浏览器中运行的开销。

如果可以run your unit tests inside a browser你可以用同样的方式对 DOM 进行断言:

describe("the super special button", () => {

  it("adds an image", (done) => {
    const button = document.querySelector(".js-super-special");
    button.click();

    // give the browser a chance to update the DOM
    setTimeout(() => {
      const image = document.querySelector(".js-image")

      // using assertion library, like chai
      expect(image).to.not.beNull();

      // or using a port of Node's `assert` from a bundler like browserify:
      assert(image != null);

      done();
    })
  })
});