如何配置@ui5/middleware-code-coverage适配iframe中运行的应用？

1. 安装依赖 #

确保sample-app中已安装代码覆盖率中间件：

npm install --save-dev @ui5/middleware-code-coverage

2. 修改ui5.yaml配置 #

在项目根目录的ui5.yaml中，配置server中间件，并扩展instrument规则以覆盖iframe内的文件：

server:
  customMiddleware:
  - name: ui5-middleware-code-coverage
    afterMiddleware: compression
    configuration:
      enabled: true
      instrument:
        # 配置需要插桩的文件路径规则，确保包含iframe加载的应用文件
        include:
          - "**/*.js"
          - "**/webapp/**/*.js"
        # 可选：排除测试文件本身，避免干扰覆盖率数据
        exclude:
          - "**/test/**/*.js"
      coverage:
        # 可选：配置覆盖率报告的输出格式与保存路径
        reporter: ["html", "text"]
        dir: "./coverage"

3. 调整Opa5测试的iframe启动路径 #

确保Opa5.iStartMyAppInAFrame使用相对当前测试服务的路径，保证中间件能拦截资源请求：

sap.ui.define([
  "sap/ui/test/Opa5",
  "sap/ui/test/opaQunit"
], function(Opa5, opaQunit) {
  opaQunit("测试iframe内应用", function(Given) {
    Given.iStartMyAppInAFrame("../index.html");
  });
});

4. 启动服务并采集覆盖率 #

启动UI5测试服务：

ui5 serve --config ui5-test.yaml

运行测试后，覆盖率报告会生成在配置的dir路径（默认./coverage）下，打开index.html即可查看包含iframe内代码的覆盖率数据。

关键说明 #

• instrument.include规则必须覆盖所有iframe中加载的应用JS文件，如果iframe加载的是子路径资源，需补充对应匹配规则。
• 中间件通过拦截HTTP请求实现实时插桩，因此iframe的资源请求必须经过该中间件处理，需避免使用外部绝对路径。

内容的提问来源于stack exchange，提问作者Tamás