Unit testing webpack bundle with Karma, is it possible?

Question

I'm working on testing a typescript library (no Angular) where the source code is being transpiled with babel and bundled with webpack into a /dist/bundle.js file.

I initialy thought that I could just give Karma files option my bundled source code and let karma-typescript plugin to serve the transpiled tests, but it seems whenever I run the tests I get the following errors:

Error during loading: ReferenceError: require is not defined in http://localhost:9876/base/dist/bundle.js?8168170503b1867e4e3106e758ac54379ed6df42 line 909
Error during loading: Error: tsyringe requires a reflect polyfill. Please add 'import "reflect-metadata"' to the top of your entry point. in http://localhost:9876/absolute/tmp/karma-typescript-bundle--3089596-66ZFHq49ZYQd-.js?da39a3ee5e6b4b0d3255bfef95601890afd80709 line 1452

For the first error I tried using karma-browserify to solve the "require is not defined" but it didn't work. For the second error, the tests don't have an entry point so I don't get where should I add "reflext-metadata". And if it refers to the source code, my entrypoint file at /src/index.ts does have that line at the top.

Then I thought maybe I could let Karma handle webpack and add the tests to the bundle but webpack config is quitte customized with plugins and functions that instantiate global constants (its a webpack.test.config.babel.js file that extends another base config in a webpack.base.config.babel.js file). I tried importing the configuration as a variable into the karma config file but the config files are written using ES6 and use babel to be transpiled down to ES5 but this doesn't seem to work with karma-webpack plugin for some reason. Gives an error I'll add here later.

So I'm thinking the only other option is to bundle the tests with webpack along with the source code and pass only bundle.js file to Karma files option. Problem is that I'm not sure how you add the tests to the bundle since there is no entrypoint file that imports all the tests as with the source code.

Any ideas on how could I get this working? Thx for any help!

Project structure:

./
├── dist
│   ├── bundle.js
├── node_modules
├── src
└── tests
    ├── test.spec.ts

karma.config.js:

module.exports = function(config) {
    config.set({
      basePath: '',
      frameworks: ['jasmine','karma-typescript'],
      plugins: [
        'karma-jasmine',
        'karma-typescript',
        'karma-jasmine-html-reporter',
        'karma-spec-reporter',
        'karma-browserify',
      ],
      client: {
        clearContext: false
      },
      files: [
        'dist/bundle.js',
        'tests/**/*.spec.ts'
      ],
      exclude: [
      ],
      preprocessors: {
        'tests/**/*.spec.ts': ['karma-typescript'],
      },
      reporters: ['spec', 'kjhtml'],
      port: 9876,
      colors: true,
      logLevel: config.LOG_INFO,
      autoWatch: true,
      browsers: [],
      singleRun: false,
      concurrency: Infinity,
      restartOnFileChange: true,
      browserDisconnectTimeout: 100000,
      browserNoActivityTimeout: 40000,
      
      karmaTypescriptConfig: {
        tsconfig: './tsconfig.json',
        compilerOptions: {
          // Overrides or sets additional compiler options
          emitDecoratorMetadata: true,
          experimentalDecorators: true,
          sourceMap: true,
          module: "commonjs"
        },
        bundlerOptions: {
          transforms: [
            require("karma-typescript-es6-transform")()
          ],
        }
      },
    })
  }

tsconfig.json:

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES2020",
    "sourceMap": false,
    "outDir": "dist",
    "allowJs": false,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "declaration": true,
    "lib": ["DOM", "ES2020", "WebWorker"],
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "strict": true,
    "strictNullChecks": false,
    "stripInternal": true,
    "allowSyntheticDefaultImports": true,
    "types": ["jasmine"],
    "typeRoots": [
      "node_modules/@types",
      "src/app/modules/definitions/"
    ]
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src/app/**/*",
    "node_modules/@types/w3c-image-capture/index.d.ts",
    "tests/**/*",
  ]
}