我正在使用 Javascript 库嵌入浏览器。
问题是我是从 https://github.com/krasimir/webpack-library-starter 开始这个项目的我想测试我的库，但是 DOM 有问题，因为我的项目没有 html，所以我不知道应该如何测试 DOM 方法。
该库将嵌入到我们客户的网站中，其想法是制作一个嵌入脚本，如谷歌地图、分析 sdk 等。
我正在使用 chai 和 mocha 进行测试，但也许我应该更改为 ava 或类似的东西。
我知道，例如在 React 中，您有模拟 DOM 的工具，但它是在 vanilla JS 中，所以...请帮忙。
我的库类示例:
export class MyClass {
constructor(htmlElement) {
this.clientWebsiteHTMLElement = htmlElement;
this.addChild();
}
addChild() {
let child = document.createElement('div');
this.clientWebsiteHTMLElement.appendChild(child);
}
}
my-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
最佳答案
问题是 Mocha 测试是用 Node.js 执行的，这意味着默认情况下，没有可用的浏览器可以提供提供像 document 这样的 API 的 DOM。或 window .
为这些测试提供 DOM 的流行工具是 JSDOM .
这是一个简单的示例，您可以如何测试您的类 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。
关于javascript - 如何测试嵌入js脚本库中的DOM方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53381039/