如何让测试文件名出现在 Gitlab Junit 测试报告中？答案

【问题标题】：How to make test file names appear in Gitlab Junit test report?如何让测试文件名出现在 Gitlab Junit 测试报告中？
【发布时间】：2022-07-14 21:42:41
【问题描述】：

我在一个 Angular 项目中安装了 karma-junit-reporter，设置如下：

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('karma-junit-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false, // leave Jasmine Spec Runner output visible in browser
      jasmine: {
        failSpecWithNoExpectations: true,
      }
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml', 'junit'],
    junitReporter: {
      outputDir: 'reports', // results will be saved as $outputDir/$browserName.xml
      outputFile: 'junit.xml', // if included, results will be saved as $outputDir/$browserName/$outputFile
      suite: '', // suite will become the package name attribute in xml testsuite element
      useBrowserName: false, // add browser name to report and classes names
      // function (browser, result) to customize the name attribute in xml testcase element
      nameFormatter: function(browser, result) {
        return result.description;
      },
      // function (browser, result) to customize the classname attribute in xml testcase element
      classNameFormatter: function(browser, result) {
        return result.suite[0];
      },
      properties: {}, // key value pair of properties to add to the <properties> section of the report
      xmlVersion: null // use '1' if reporting to be per SonarQube 6.2 XML format
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome', "ChromeHeadlessCI"],
    singleRun: false,
    customLaunchers: {
      ChromeHeadlessCI: {
        base: 'ChromeHeadless',
        flags: ['--no-sandbox']
      }
    }
  });
};

当unit-tests 作业在 Gitlab 管道中运行时：

unit_tests:
  stage: test
  needs:
    - job: app_build
  before_script:
    - apt-get update
    - wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
    - apt install -y ./google-chrome*.deb;
  variables:
    CHROME_BIN: /usr/bin/google-chrome
  script:
    - npm link @angular/cli@11.2.19
    - npm run test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
  cache:
    - key: $CI_COMMIT_REF_SLUG-node_modules
      paths:
        - .npm/
        - node_modules/
  artifacts:
    when: always
    reports:
      junit:
        - $CI_PROJECT_DIR/src/reports/*.xml
  allow_failure: true

报告已生成，但没有出现带有文件名的字段：

是否有人也使用karma-junit-reporter 知道如何将此信息添加到报告中？

【问题讨论】：

请问可以直接在问题中添加图片吗？
对不起，我没注意到。现在更新了！

标签： angular junit gitlab-ci karma-runner test-reporting

【解决方案1】：

我不知道karma-junit-reporter，但遇到了同样的问题。 JUnit XML 输出似乎缺少一些属性。确保testcase 标签具有属性file，例如<testcase id="1" name="your-test-name" file="yourfile" ...>

【讨论】：