Ability to customize the "assetPrefix" for HTML report.

[Zizzamia]

Clear and concise description of the problem

We are using Vite for https://onchainkit-coverage.vercel.app/, which loads really well when used at the top-level domain.

But as soon as we run the report in its own subfolder, https://onchainkit.xyz/coverage, the HTML report struggles to handle static files and page links.

Suggested solution

I think one feature that could make this super easy is the ability to set assetPrefix. This would be similar to what Next.js has at https://nextjs.org/docs/app/api-reference/next-config-js/assetPrefix.

Ideally, that can be added to the report config

reporter: [
        [
          'html',
          {
            assetPrefix: 'https://onchainkit.xyz/coverage/',
          },
        ],
      ],

Thank you again for building Vitest. We really love writing test with it.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[hi-ogawa]

It looks like all assets inside html are relative, so accessing https://onchainkit.xyz/coverage/index.html seems to work already. I think if you tweak a vercel config, then https://onchainkit.xyz/coverage/ would also work too (currently 404).

If you want trailing slash stripped /coverage, then it might need a different approach though.

[Zizzamia]

@hi-ogawa thank you for the quick reply. So we use the vercel.json rules to organize the coverage page.
Here file: https://github.com/coinbase/onchainkit/blob/main/vercel/vercel.json

Also, knowing https://onchainkit.xyz/coverage/index.html works and sublinks too https://onchainkit.xyz/coverage/src/identity/hooks/index.html, that's very good news. 🗞️

Now I wonder, if I should experiment with vercel.json rules a bit more.

[hi-ogawa]

Btw, Vitest's coverage reporter generation is delegated to istanbuljs (like html reporter here https://github.com/istanbuljs/istanbuljs/blob/main/packages/istanbul-reports/lib/html/index.js), so the feature request needs to go there if this requires fundamental change.

I just found they support custom linkMapper, but playing with it, it looks tricky to achieve what you need (assuming what you want is to serve it without trailing slash https://onchainkit.xyz/coverage). Note that <a href> link is also relative, so implementing "assetPrefix" alone won't solve your issue.

One quick hack I'm thinking is to inject <base> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base into your root index.html. Something like <base href="/coverage/" /> would allow relative links to resolved correctly even when served in /coverage.

[Zizzamia]

Feel free to close this issue, I end up using https://onchainkit.xyz/coverage/ with / and do some re-routing magic to have https://onchainkit.xyz/coverage reroute to https://onchainkit.xyz/coverage/

[hi-ogawa]

Yeah, your setup looks good to me 👍 Okay closing.