babel-plugin-istanbul plugin is not identified when running web-test-runner command

[skullpsg]

We are using web-test-runner for running ts tests. We can be able to create coverage for V8, but we need babel instrumented istanbul report. So we have followed below steps:

Configuration file web-test-runner.config.mjs:

ref: https://modern-web.dev/docs/test-runner/writing-tests/code-coverage/#coverage-browser-support

import { fromRollup } from "@web/dev-server-rollup";
import { babel as rollupBabel } from "@rollup/plugin-babel";

const babel = fromRollup(rollupBabel);

export default {
  files: ["src/**/*.spec.ts", "src/**/*.spec.html", "src/**/*.spec.js"],
  coverage: true,
  concurrency: 1,
  coverageConfig: {
    nativeInstrumentation: false,
  },
  plugins: [
    babel({
      include: ["**/*.js"],
      babelHelpers: "bundled",
      plugins: ["babel-plugin-istanbul"],
    }),
  ],
};

Error: Coverage is enabled with nativeInstrumentation disabled. Expected coverage provided in the browser as a global coverage variable.Use a plugin like babel-plugin-istanbul to generate the coverage, or enable native instrumentation.

project structure:

[skullpsg]

It looks, for ts file it is taking video/mp2t as content type. How to fix this?

[bashmish]

Is babel configured correctly? In our docs I see default.default export being used https://modern-web.dev/guides/dev-server/using-plugins/#babel which seems like the babel module has no proper ESM export

import { fromRollup } from '@web/dev-server-rollup';
import rollupBabel from '@rollup/plugin-babel';

// note that you need to use `.default` for babel
const babel = fromRollup(rollupBabel.default);

[bashmish]

It looks, for ts file it is taking video/mp2t as content type. How to fix this?

If you need this only in dev mode, you can write a simple WDS plugin to serve .ts files as text/javascript using this hook:

https://modern-web.dev/docs/dev-server/writing-plugins/hooks/#hook-resolvemimetype

I think we even mention it in docs here: https://modern-web.dev/docs/dev-server/writing-plugins/hooks/#hook-transform

If you are transforming non-standard file types, you may also need to include a resolveMimeType hook. A good example of this is .ts files, which in Koa defaults to a streaming video.

If you also need this to be compiled for production, make sure to bundle TS files into JS chunks or convert them to JS extension if you keep files paths as is, in general make sure that non-standard extensions are not in your production bundle.

Plugins like this can help to handle TS in general https://modern-web.dev/docs/dev-server/plugins/esbuild/

[skullpsg]

@bashmish I have added mime type resolver like this:

import path from "path";

export default function resolveMimeType(url) {
  // Define a lookup table mapping file extensions to MIME types
  const mimeTypes = {
    html: "text/html; charset=utf-8",
    htm: "text/html; charset=utf-8",
    js: "application/javascript; charset=utf-8",
    css: "text/css; charset=utf-8",
    ts: "js",
  };

  // Extract the file extension from the URL
  const key = path.extname(url) || "";

  // Return the corresponding MIME type from the lookup table
  let result = mimeTypes[key.startsWith(".") ? key.slice(1) : key];
  if (result == undefined) {
    return {};
  }
  return result;
}

It seems to resolving ts loading problem.