如何修改UI5单元测试基础URL为本地项目并加载本地formatter？

问题 #

我是UI5初学者，正在尝试进行单元测试。当前testsuite.qunit.js尝试加载test/model/formatter，但Chrome调试器显示它从http://sdk.openui5.org加载，而非我本地项目webapp/test/model/文件夹下的文件，报错信息如下：

Uncaught (in promise) ModuleError: failed to load 'test/model/formatter.js' from http://sdk.openui5.org/resources/test/model/formatter.js:

相关代码如下：

testsuite.qunit.js #

QUnit.config.autostart = false;

sap.ui.getCore().attachInit(() => {
    "use strict";
    debugger;
    sap.ui.require(["test/model/formatter"], () => {
        QUnit.start();
    });
});

testsuite.qunit.html #

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>KF test</title>
            <script id="sap-ui-bootstrap"
                src="http://sdk.openui5.org/resources/sap-ui-core.js"
                data-sap-ui-resourceroots='{
                    "xy.kfunittest": "../../"
                }'></script>
            <link rel="stylesheet" type="text/css" href="https://sdk.openui5.org/resources/sap/ui/thirdparty/qunit-2.css">

            <script src="https://sdk.openui5.org/resources/sap/ui/thirdparty/qunit-2.js"></script>
            <script src="https://sdk.openui5.org/resources/sap/ui/qunit/qunit-junit.js"></script>
            <script src="https://sdk.openui5.org/resources/sap/ui/qunit/qunit-coverage.js"></script>
            <script src="https://sdk.openui5.org/resources/sap/ui/thirdparty/sinon.js"></script>
            <script src="https://sdk.openui5.org/resources/sap/ui/thirdparty/sinon-qunit.js"></script>

            <script src="test/testsuite.qunit.js"></script>
        </head>
        <body>
            <div id="qunit"></div>
            <div id="qunit-fixture"></div>
        </body>
    </html>

解决方案 #

问题出在UI5的资源根路径配置上，你只映射了应用命名空间xy.kfunittest，但测试模块test/model/formatter没有关联到本地路径，导致UI5默认去SDK地址加载。按以下步骤修改：

• 更新资源根路径配置
  在testsuite.qunit.html的sap-ui-bootstrap脚本中，给test命名空间添加本地路径映射。假设testsuite.qunit.html位于webapp/test/目录，修改data-sap-ui-resourceroots如下：

  data-sap-ui-resourceroots='{
      "xy.kfunittest": "../../",
      "test": "./"
  }'
  

  这里的"./"指向当前testsuite.qunit.html所在的test目录，确保UI5能定位到本地的test/model/formatter.js。

• 规范模块引用（可选）
  更符合UI5最佳实践的方式是将测试模块归入应用命名空间，比如引用xy.kfunittest/test/model/formatter，修改testsuite.qunit.js中的代码：

  sap.ui.require(["xy.kfunittest/test/model/formatter"], () => {
      QUnit.start();
  });
  

  同时调整文件目录结构，将test文件夹放到webapp/xy/kfunittest/下，或者保持现有结构但确保资源映射路径正确。

• 验证文件路径
  确认本地文件实际存在：如果testsuite.qunit.html在webapp/test/，那么./model/formatter.js对应webapp/test/model/formatter.js，检查文件是否存在且路径拼写无误。

内容的提问来源于stack exchange，提问作者Redrick_N