karma does not run my typescript tests along javascript tests

Question

we have a rather big/long-grown angular project. It currently runs angular 1.2 (we are in the process to upgrade to angular 1.5 and start preparing the angular2 migration).

To be able to start the angular2 migration, we want to integrate typescript into the project. The integration for the source files was quite easy. We use browserify; we just added tsify and some configs and everything worked within minutes (js+ts code/modules get bundled together).

For our frontend unit tests (karma, jasmine) its quite the opposite (working on that for hours now).

Here is our karma config: https://gist.github.com/ds82/2eaeae875eef92481bc699ead8a7ac5c

If I run our test suite with this config, the typescript spec files are just ignored completely. The tests nor the code inside these typescript files is executed at all (have console.log at the top of the spec.ts files). Browserify logs that it includes the typescript files, but if I open the karma debug browser view and try to open the source of the spec.ts files Chromes shows me just an empty file. While I'm doing this it logs:

28 06 2016 16:25:35.242:WARN [web-server]: 404: /absolute/var/folders/0p/b7pdm54d26q8db2qsxtxb3z80000gn/T/app/scripts/blobb.spec.ts

Now, if I comment out line 49 and line 50 of the karma config (which results in only loading the spec. ts files an no spec. js files), the typescript tests run just as expected. At the same time, I can view the spec.ts files in the karma debug browser view.

To summarise: If I run all tests (javascript + typescript), just the javascript files/tests are executed. If I disable/comment-out all javascript tests, my typescript tests run fine.

Does anybody has an idea how I could find the cause of this?

Answer 1

Found a workaround here: https://github.com/angular/angular-cli/issues/2125#issuecomment-247395088

I figured out a work around. In the karma.conf.js file, add:

 mime: { 'text/x-typescript': ['ts','tsx'] }, 

This tells the Karma server to serve the .ts files with a text/x-typescript mime type. That seems to make it work.

I had the same issue and found that Chrome had an error in the console about an invalid MIME type for my Typescript file. The file still has a .ts extension, so it's interpreted as a video file. The workaround tells Karma to serve it with the right MIME type.

It seems like maybe using karma-typescript would avoid this issue by serving the file with .js , but I wanted to keep the same browserify/tsify setup that we are using for regular source files.