HERE 映射 API 用于 JavaScript 测试错误

Question

更新： 我仍然遇到与下面相同的问题，但现在 JSDom 将以下错误发布到控制台：

Error: Uncaught [SyntaxError: ]
    at reportException (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:58:24)
    at processJavaScript (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:130:7)
    at HTMLScriptElementImpl._eval (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:65:7)
    at e (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:30:22)
    at Object.check (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:97:11)
    at /Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:116:12
    at wrappedEnqueued (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:234:16)
    at Request.request [as _callback] (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:184:9)
    at Request.self.callback (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/request/request.js:187:22)
    at emitTwo (events.js:106:13)
    at Request.emit (events.js:191:7)
    at Request.<anonymous> (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/request/request.js:1044:10)
    at emitOne (events.js:96:13)
    at Request.emit (events.js:188:7)
    at Gunzip.<anonymous> (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/request/request.js:965:12)
    at emitNone (events.js:91:20)
    at Gunzip.emit (events.js:185:7)
    at endReadableNT (_stream_readable.js:934:12)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9) SyntaxError
    at XMLHttpRequest.open (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:451:15)
    at http://js.api.here.com/v3/3.0/mapsjs-core.js:51:86
    at http://js.api.here.com/v3/3.0/mapsjs-core.js:51:383
    at http://js.api.here.com/v3/3.0/mapsjs-core.js:290:26
    at Object.exports.runInContext (vm.js:44:17)
    at processJavaScript (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:128:10)
    at HTMLScriptElementImpl._eval (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:65:7)
    at e (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:30:22)
    at Object.check (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:97:11)
    at /Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:116:12
    at wrappedEnqueued (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:234:16)
    at Request.request [as _callback] (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:184:9)
    at Request.self.callback (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/request/request.js:187:22)
    at emitTwo (events.js:106:13)
    at Request.emit (events.js:191:7)
    at Request.<anonymous> (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/request/request.js:1044:10)
    at emitOne (events.js:96:13)
    at Request.emit (events.js:188:7)
    at Gunzip.<anonymous> (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/request/request.js:965:12)
    at emitNone (events.js:91:20)
    at Gunzip.emit (events.js:185:7)
    at endReadableNT (_stream_readable.js:934:12)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)

我正在尝试让 HERE 地图 JavaScript API 在使用 Mocha 编写的测试中正常工作。

it("should generate a map when the component gets rendered", function generateMapTest(done) {
    this.timeout(0);
    const scriptMap = getScriptMap();
    const scriptNames = Object.keys(scriptMap);
    const finalScriptToLoad = last(scriptNames);

    getScript(finalScriptToLoad).onLoad((err: any, res?: any) => {
        global.H = window.H;

        const platform = new H.service.Platform({
            app_id: 'app_id',
            app_code: 'app_code',
        });

        console.log(window.H);
        done(err);
    });
});

为了解释上述内容 - scriptMap 变量用于存储一个对象，该对象包含要加载的每个 HERE 地图脚本的 URL。通过使用 JavaScript 将标签附加到 DOM （使用 jsdom），每个脚本按顺序加载。当每个脚本加载时，回调数组中的每个回调都会被调用，传递通常的错误和响应对象。使用如下所示的 onLoad 方法将回调添加到此数组。

当最终脚本完成从 HERE 服务器加载后，我将 H 对象附加到 Mocha 中的全局变量并尝试创建平台服务。这会导致以下错误：

Unhandled rejection TypeError: Cannot read property 'mapsjs-core' of undefined
    at Hi (http://js.api.here.com/v3/3.0/mapsjs-core.js:287:626)
    at Ji (http://js.api.here.com/v3/3.0/mapsjs-core.js:288:350)
    at V.Es (eval at <anonymous> (http://js.api.here.com/v3/3.0/mapsjs-core.js:47:404), <anonymous>:13:188)
    at new V (eval at <anonymous> (http://js.api.here.com/v3/3.0/mapsjs-core.js:47:404), <anonymous>:12:257)
    at Object.getPlatform (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/src/utils/get-platform.js:9:16)
    at /Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/src/HEREMap.js:34:50
    at /Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/src/utils/cache.js:52:104
    at arrayEach (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/lodash/lodash.js:522:11)
    at Function.forEach (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/lodash/lodash.js:9011:14)
    at /Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/src/utils/cache.js:52:30

我正在努力调试所提供代码的缩小版本，所以如果我能得到一些帮助来追踪这个错误的来源，我将不胜感激。可能值得说明的是，所有这些都是在构建 HERE Maps React 组件的上下文中进行的，源代码可以在这里找到：https://github.com/josh-es/react-here-maps.

~^~

Answer 1

我设法将问题隔离到 XMLHttpRequest API 的 JSDom 实现。用 'xmlhttprequest' npm 包替换它解决了这个问题。通过运行:

安装

npm install --save-dev xmlhttprequest

然后解决上面的问题：

import { XMLHttpRequest } from "xmlhttprequest";

global.window.XMLHttpRequest = XMLHttpRequest;

HERE 映射 API 用于 JavaScript 测试错误

HERE Maps API for JavaScript Testing Bug

javascript

reactjs

here-api

jsdom