使用 mocha javascript 时如何模拟 dom 元素？
[英]How do I mock dom elements when using mocha javascript?
问题描述
I'm using mocha to test my JavaScript code.
我正在使用 mocha 来测试我的 JavaScript 代码。 The code involves html and css and implements a chat app.代码涉及html和css，实现了一个聊天app。 As far as I saw, Mocha can test JavaScript functions by matching the expected value to the function's return value.据我所知，Mocha 可以通过将期望值与函数的返回值进行匹配来测试 JavaScript 函数。
But what if I want to test functions that don't return a value?但是如果我想测试不返回值的函数怎么办？ Functions that mainly deal with DOM elements.主要处理DOM元素的函数。 (Like appending an image for example ). （例如附加图像）。
How exactly can I mock DOM elements in mocha and then test if the function succeeds in generating the appropriate DOM elements?我究竟如何在 mocha 中模拟 DOM 元素，然后测试该函数是否成功生成了适当的 DOM 元素？
I had looked around and found it was possible with selenium webdriver and jsdom.我环顾四周，发现使用 selenium webdriver 和 jsdom 是可能的。 Is it possible to do this test with mocha alone and no other additional interfaces?是否可以单独使用mocha而没有其他附加接口来进行此测试？
3 个解决方案
解决方案1
2 已采纳 2017-07-04 13:18:49
JSDOM is convenient because it allows you to test against a "real" DOM implementation without the overhead of running in a web browser. JSDOM 很方便，因为它允许您针对“真实”DOM 实现进行测试，而无需在 Web 浏览器中运行的开销。
If you can run your unit tests inside a browser you can assert against the DOM in the same way:如果您可以在浏览器中运行单元测试，则可以以相同的方式对 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();
})
})
});
解决方案2
0 2020-10-30 16:57:49
You have to use fake DOM APIs in nodejs context, and make them global on before hooks of mocha.你必须在 nodejs 上下文中使用假的 DOM API，并在 mocha 钩子之前使它们全局化。
beforeEach(() => {
const dom = new JSDOM(
`<html>
<body>
</body>
</html>`,
{ url: 'http://localhost' },
);
global.window = dom.window;
global.document = dom.window.document;
});
Read more here: https://seesparkbox.com/foundry/improve_unit_testing_with_mocha_chai_jsdom在此处阅读更多信息： https : //seesparkbox.com/foundry/improve_unit_testing_with_mocha_chai_jsdom
解决方案3
0 2021-02-24 09:57:00
you can use jsdom-global package alternative that also works outside of Mocha.您可以使用jsdom-global包替代品，它也适用于 Mocha 之外。 mocha-jsdom still works, but jsdom-global is better supported. mocha-jsdom 仍然有效，但 jsdom-global 得到了更好的支持。
npm install --save-dev --save-exact jsdom jsdom-global
modify npm test script to be:修改 npm 测试脚本为：
"test": "mocha -r jsdom-global/register"
test example: app.test.js测试示例： app.test.js
import {JSDOM} from 'jsdom'; // can also use common js
describe('DOM', () => {
it('should log selector list', () => {
const dom = new JSDOM(
`<html>
<body>
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
</body>
</html>`,
{url: 'http://localhost'},
);
});
global.document = dom.window.document;
console.log(document.querySelectorAll('.card'));
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.