esbuild options are ignored

[steve-taylor]

Here's my config:

// karma.conf.js

module.exports = function (config) {
    config.set({
        frameworks: ['mocha', 'chai'],
        plugins: [
            'karma-esbuild',
            'karma-mocha',
            'karma-chai',
            'karma-chrome-launcher',
        ],
        files: ['packages/*/test/**/*.test.+(ts|tsx)'],
        preprocessors: {
            '**/*.+(ts|tsx)': 'esbuild',
        },
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        browsers: ['Chrome'],
        autoWatch: false,
        singleRun: true,
        concurrency: Infinity,

        esbuild: {
            tsconfig: 'tsconfig.spec.json',
            inject: ['./karma-esbuild-react.js'],
        },
    })
}

// karma-esbuild-react.js

import React from 'react';

import React from 'react'; is not being injected at all. Also, changing tsconfig to anything else has no effect.

Uncaught ReferenceError: React is not defined
  at /path/to/MyComponent.tsx:22:11

The documentation says that this is how you pass options to esbuild, but it appears not to be the case.

[marvinhagemeister]

Just tried it out with the snippets you've provided and it works as expected on my end. All options are passed correctly to esbuild and it injects the file correctly. If an option cannot be resolved we forward all errors thrown by esbuild by default.

Please ensure that you're on a recent version of esbuild and karma-esbuild. If the error still occurs the command output might give further hints as to why those files cannot be found. Esbuild prints a big red error message at the beginning before karma logs to the console.

[steve-taylor]

I don't suppose you have a working example of karma-esbuild with React, by any chance?

[RamiAlzayat]

Hey @steve-taylor ,
I'm facing the same issue, any updates/solutions?
Thanks.

[steve-taylor]

@RamiAlzayat yes. My solution was to use Cypress component test runner instead.