karma + webpack + typescript settings

bar_test.html

<script>
  it("ok in html", (done) => {
    done()
  });
</script>
  

foo_test.ts

// @ts-ignore
it("ok in ts", () => {});

karma.conf.js

const webpack = require("webpack");
const isCI = !!process.env.CI;

module.exports = config => {
  config.set({
    browserStack: {
      // your config
    },
    customLaunchers: {
      bs_ie_11: {
        base: "BrowserStack",
        browser: "IE",
        browser_version: "11.0",
        os: "Windows",
        os_version: "10"
      },
    },
    browsers: isCI
      ? ["bs_ie_11"]
      : ["ChromeHeadless"],
    frameworks: ["mocha"],
    singleRun: true,

    files: ["foo_test.ts", "bar_test.html"],

    preprocessors: { "*_test.ts": ["webpack"] },

    webpack: {
      mode: process.env.WEBPACK_MODE || "production",
      resolve: {
        extensions: [".js", ".mjs", ".ts", ".tsx"]
      },
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: [
              {
                loader: "ts-loader",
                options: {
                  transpileOnly: true
                }
              }
            ]
          }
        ]
      },
      plugins: [
        new webpack.DefinePlugin({
          "process.env": {
            CI: JSON.stringify(process.env.CI)
          }
        })
      ]
    },
    reporters: ["mocha"],
    colors: true,
    logLevel: config.LOG_INFO
  });
};

package.json

{
  "name": "test",
  "private": true,
  "version": "1.0.0",
  "license": "MIT",
  "devDependencies": {
    "@types/mocha": "^5.2.7",
    "karma": "4.2.0",
    "karma-browserstack-launcher": "1.5.1",
    "karma-chrome-launcher": "3.0.0",
    "karma-mocha": "1.3.0",
    "karma-mocha-reporter": "2.2.5",
    "karma-webpack": "4.0.2",
    "mocha": "^6.2.0",
    "ts-loader": "^6.0.4",
    "typescript": "^3.5.3",
    "webpack": "^4.37.0"
  }
}