如何在nodejs中使用jquery-ui？
如何在nodejs中使用jquery-ui？
提问于 2021-05-02 01:40:44
我试图在nodejs中使用jquery-ui draggable()函数，在JSdom的帮助下，我能够让jquery与jsdom一起工作，但jquery-ui不起作用。不知道如何链接这两个库或使其工作
const { JSDOM } = require('jsdom');
const fs = require('fs');
const path = require('path');
const htmlPage = fs.readFileSync(path.resolve(__dirname,'../views/search.ejs'));
const { window } = new JSDOM(htmlPage);
const $ = require('jquery-ui-dist/jquery-ui')(window);
exports.getSearch = (req, res) => {
res.render('search', {pageTitle: 'Search'});
$('.item').draggable();
// console.log($('.main-head'));
}执行npm start后，出现错误
/home/jquery/node_modules/jquery-ui-dist/jquery-ui.js:14
factory( jQuery );
^
ReferenceError: jQuery is not defined
at /home/jquery/node_modules/jquery-ui-dist/jquery-ui.js:14:12
at Object.<anonymous> (/home/jquery/node_modules/jquery-ui-dist/jquery-ui.js:16:2)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/home/Nodejs/jquery/controller/search-controller.js:9:11)
[nodemon] app crashed - waiting for file changes before starting...search.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="main-head">
<div class="item">
<h1>item1</h1>
</div>
<div class="item">
<h1>item2</h1>
</div>
</div>
</body>
</html>回答 1
Stack Overflow用户
发布于 2021-09-27 21:16:48
这周我必须自己解决这个问题。我无法在JSDOM窗口上以任何似乎有效的方式初始化jquery-ui (我尝试通过内联和cdn脚本以及npm模块将其包括在内)。我的结论是，最好是简单地模拟与测试相关的jquery-ui方法。
在我的setupTests.ts文件中，我有以下代码，它通过在jquery-ui.js的第14行中使jQuery可访问来解决您共享的错误
(global as any).$ = require('jquery');
(global as any).jQuery = (global as any).$; // first setup global.jQuery...
require('jquery-ui'); // then initialize jquery-ui我使用的是jest，所以在jest.config.js中将它设置为我的setupFile。在使用jquery-ui之前，您应该只需要执行这些行。
module.exports = {
...
"setupFiles": [
"<rootDir>/tests/setupTests.ts"
],然而，虽然以这种方式加载jquery-ui确实让我们克服了您分享的特定错误，但我发现它在JSDOM中并不能像预期的那样工作。当我尝试在JSDOM中的元素上调用jquery-ui方法时，它们仍然是undefined。
因此，我模拟了测试所需的方法，如下所示。:)
const dom = new JSDOM('<html> ... </html>');
const $ = require('jquery')(dom.window.document);
const tooltip = jest.fn(() => {});
$.__proto__.tooltip = tooltip; // mocks a jquery-ui method
testThatUsesJQuery($); // executes the code under test
expect(tooltip).toHaveBeenCalledTimes(4); // expects the method to have been called页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67349191
复制相关文章
相似问题
腾讯云开发者
