如何测试嵌入 js 脚本库中的 DOM 方法？

Question

我正在 Javascript 库中嵌入浏览器。

问题是我是从 https://github.com/krasimir/webpack-library-starter 开始这个项目的，我想测试我的库，但是 DOM 有问题，因为我的项目没有 html 所以，我不知道应该如何测试 DOM 方法。

该库将嵌入到我们客户的网站中，其想法是制作一个嵌入脚本，例如 google 地图、分析 sdk 等

我正在使用 chai 和 mocha 进行测试，但也许我应该更改为 ava 或类似的东西。

我知道，例如在 React 中，您有模拟 DOM 的工具，但它是在 vanilla JS 中，所以...请帮忙。

我的图书馆示例 class:

export class MyClass {
  constructor(htmlElement) {
   this.clientWebsiteHTMLElement = htmlElement;
   this.addChild();
  }

  addChild() {
   let child = document.createElement('div');
   this.clientWebsiteHTMLElement.appendChild(child);
  }
}

我的例子-lib.js

import { MyClass } from './my-class.js'


if (window && document) {
  (function (window, document){
    let container = document.getElementById('container');
    let myClass = new MyClass(container);

    window.myLib = myClass;
  })(window, document) 
}

入口示例（进入客户端网站，不在同一个项目中）：

<html>
  <head></head>
  <body>
   <div id="container"></div>

  <script src="http://myserver.com/to/serve/embed/scripts/myLib-bundle.js"></script>
  </body>
<html>

确实比这更复杂，但解决方案是一样的。

例如，我该如何测试？

谢谢！ :D

Answer 1

问题是 Mocha 测试是用 Node.js 执行的，这意味着默认情况下，没有可用的浏览器可以提供 DOM 提供像 document or window 这样的 API。

为这些测试提供 DOM 的流行工具是 JSDOM。

这是一个简单的示例，您可以如何测试 class MyClass:

import { MyClass } from '../modules/MyClass';
import { JSDOM } from 'jsdom';

const dom = new JSDOM(
  '<!DOCTYPE html><html><head></head><body><div id="root"></div></body></html>'
);

global.document = dom.window.document;

describe('My class', () => {
  it('adds an element to the HTML element passed to its constructur', () => {
    const htmlElement = document.getElementById('root');
    const myClass = new MyClass(htmlElement);
    expect(htmlElement.children.length).toBe(1);
  });
});

注意： 由于您已经在考虑切换测试库，我可以建议切换到 Jest 吗？它预装了 JSDom。

如何测试嵌入 js 脚本库中的 DOM 方法？

How to test DOM methods in embed js script library?

javascript

testing

dom

unit-testing

embedded-resource