How to show relative path to the root directory on the details section?

[edumserrano]

When I run my tests, the html report shows an absolute path for the tests under the details section. It looks like this:

What I would like is that the path to the test files was a relative path instead of absolute. I couldn't find any way to configure this in the jest-html-reporters. Looking through the source code it seems that the reporter will use whatever is the TestResult.testFilePath which comes from jest.

The way I got this to work for me was to create a custom reporter that runs before the jest-html-reporters and have my custom reporter update the TestResult.testFilePath to the value I want. Here's how the custom reporter looks like:

// set-relative-path-for-tests.jest-reporter.js file

const { DefaultReporter } = require('@jest/reporters');
const path = require('node:path');
const { AggregatedResult, Test, TestResult } = require('@jest/test-result');

class SetRelativePathForTestsReporter extends DefaultReporter {
  /**
   * @param {Test} test
   * @param {TestResult} testResult
   * @param {AggregatedResult} aggregatedResult
   */
  onTestResult(test, testResult, aggregatedResult) {
    testResult.testFilePath = path.relative(process.cwd(), testResult.testFilePath);
    super.onTestResult(test, testResult, aggregatedResult);
  }
}

module.exports = SetRelativePathForTestsReporter;

The reporters configuration on the jest configuration file looks like this:

  ...
  reporters: [
    "default",
    "summary",
    "<rootDir>/projects/tests/jest/set-relative-path-for-tests.jest-reporter.js",
    [
      "jest-html-reporters",
      {
        publicPath: "<rootDir>/test-reporters/jest/html-report",
        filename: "index.html",
        pageTitle: "jest test report - ngx-module-federation-tools",
        includeConsoleLog: true,
      },
    ],
  ],
  ...

And with the above I get the test file path as I wanted in the html report:

Is there a simpler way to achieve this?