Transpiled file is in .ts, instead of .js.

[hannah23280]

My karma-webpack is currently v2.0.4. I observe that the karma-webpack does not transpile the file in .ts to .js. In other word, the transpiled file seem to be still in .ts. May I know if karma-webpack has any configuration that allows me to configure the transpiled file's extension? I need it to be in .js, which actually make sense since the content of the transpiled file is suppose to be in javascript.

[TheLarkInn]

@DanielRosenwasser is there any perscribed best practices for this?

[rhys-e]

FWIW - my webpack config hands off to ts-loader which transpiles typescript fine when used via karma-webpack

[hannah23280]

Hi rhys-e,
I am using awesome-typescript-loader instead of ts-loader.
Anyway, when u use ts-loader, do you need to configure your karma configuration file with the below setting?

mime: { 'text/x-typescript': ['ts','tsx'] }, For my case, i need to.

[rhys-e]

No I don't. I just tell webpack to use ts-loader to load any files with a .ts extension as a webpack rule.

[hannah23280]

Hi rhys-e,,
Have u tried to use Chrome Launcher plugin for karma.js?
I am using ts-loader and without this setting mime: { 'text/x-typescript': ['ts','tsx'] }, my chrome developer tool will show the error in below console...when you click on the debug button on the launched chrome page.

Refused to execute script from 'http://localhost:9880/base/main/id_generator/client/unit_test/bidderValidation.test.ts' because its MIME type ('video/mp2t') is not executable.

Searching on internet shows that I am not alone. I not sure if u have encountered this.

[rhys-e]

I don't have that issue - I imagine it has something to do with default apps used for opening certain extensions (or the lack thereof).

[reda-alaoui]

Hello,

I have the same issue as @rhys-e .
My project is in full typescript, even my tests are written in typescript.
I tried with awesome-typescript-loader AND ts-loader with no luck.

Using mime 'text/x-typescript': ['ts'] is mandatory.
In chrome, in debug mode, using the dev tool:

• I can't find the source ts files
• The only ts file that I find is the my root test file which contains the javascript ES5 webpack output.

[ordinaryorange]

@reda-alaoui @hanct I too have just been fighting the Karma config for the last couple of hours.

I'm running webpack 3.10 and karma-webpack 2.09.

Even on a DEBUG log output karma-webpack isn't much help when it is a config issue. I had the same situation where webpack did not seem to be transpiling the typescript to javascript. If I checked the file in the browser I could confirm that it was unmodified typescript.

Tripple check your karma config. For me it was a path issue.
Check you are not disabling logging from karma or webpack, then you should see webpack's [emitted] console output if webpack is indeed being run. If not then that is the first giveaway of a bad config.

Next start simple. Create a simple test case (something like true.isTruthy()) in its own file in the same folder as the karma.config. Specify that exact file name in the karma files and preprocessors sections. Don't include any other files.

Make sure you webpack module rule is something simple like { test: /\.ts$/, loader: "ts-loader" }, then test it to see if you can get that one test to pass.
Once this test is working then start adjusting settings and retesting. Only change one thing at a time, you will find your error then.

[sechel]

See also #334

[ryanclark]

I've fixed this in #347!

[michael-ciniawsky]

Released in v3.0.2 🎉

[michael-ciniawsky]

Released in v4.0.0-rc.1 🎉 (karma-webpack@next)