如何将 jquery-ui 与 nodejs 一起使用？答案

【问题标题】：how to use jquery-ui with nodejs?如何将 jquery-ui 与 nodejs 一起使用？
【发布时间】：2021-07-24 16:48:02
【问题描述】：

我正在尝试在 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...

搜索.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>

【问题讨论】：

标签： jquery node.js express jquery-ui

【解决方案1】：

这周我必须自己解决这个问题。我无法以任何似乎可行的方式在 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

【讨论】：