Fatal编程技术网
  • javascript/
  • Javascript 如何在嵌入式js脚本库中测试DOM方法？

Javascript 如何在嵌入式js脚本库中测试DOM方法？

javascript unit-testing testing dom

Javascript 如何在嵌入式js脚本库中测试DOM方法？,javascript,unit-testing,testing,dom,embedded-resource,Javascript,Unit Testing,Testing,Dom,Embedded Resource,我正在一个Javascript库中工作，以嵌入到浏览器中 问题是我是从开始这个项目的，我想测试我的库，但是我的DOM有一个问题，因为我的项目没有html，所以我不知道我应该如何测试DOM方法 该库将嵌入到我们客户的网站中，其想法是制作一个嵌入脚本，如谷歌地图、分析sdk等 我正在使用chai和mocha进行测试，但也许我应该改为ava或类似的东西 我知道，例如，在React中，您可以使用工具来模拟DOM，但它是在vanilla JS中，所以。。。请帮忙 我的库类示例： export class

我正在一个Javascript库中工作，以嵌入到浏览器中

问题是我是从开始这个项目的，我想测试我的库，但是我的
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);
  }
}

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

  <script src="http://myserver.com/to/serve/embed/scripts/myLib-bundle.js"></script>
  </body>
<html>
我的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) 
}
入口点示例（在客户端网站中，不在同一项目中）：

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

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

<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执行的，这意味着默认情况下，没有可用的浏览器可以提供提供类似或的API的DOM

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

下面是一个简单的示例，说明如何测试类
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);
  });
});

从“../modules/MyClass”导入{MyClass}；
从'JSDOM'导入{JSDOM}；
constdom=newjsdom(
''
);
global.document=dom.window.document；
描述（‘我的班级’，（）=>{
它（'将元素添加到传递给其构造函数的HTML元素'，（）=>{
const htmlElement=document.getElementById（'root'）；
const myClass=新的myClass（htmlElement）；
expect（htmlElement.childrence.length）.toBe（1）；
});
});
注意：既然您已经在考虑切换您的测试库，我可以建议您切换到吗？它预装了JSDom。

最常用的工具是JSDom：哦，太好了，你能写一个更具体的例子来测试它吗？（与chai或任何测试套件一起使用）