Babelify project with typescript and karma

Question

Setup and goal

Typescript project, with typescript mocha tests. Project should be transpiled from Typescript to ES6 and then transformed via Babel for several shippable bundles.

I'd like to run all tests in browser via Karma (and eventually BrowserStack) against same transformed version as will be produced by babel.

Attempts and issues

I have karma-typescript + mocha working, but only in es2017 compatible browsers. The problem is to plug babel in between.
I think I've tried everything I could imagine, but namely:

• karma-typescript-es6-transform: transforms only bundled ES6 modules, not user's code.
• karma-browserify together with babelify transform: browserify seems to be incompatible with karma typescript or at least its transform system. It fails when babel can't find some/some.js file, which seems to exist only in karma memory.
• karma-babel-preprocessor seems to be right way to do it.

Also numerous variations of all above and many more, none of which worked.

Promising setup with karma-babel-preprocessor

I think this should be a correct way to do it, so I've posted a project with my current state of things: https://github.com/anpur/karma-typescript-babelify.

Here is part of my karma.conf.js:

frameworks: ['mocha', 'karma-typescript'],

preprocessors: {
  'src/*.ts': ['karma-typescript', 'babel'],
},

babelPreprocessor: {
  options: {
    presets: [
      [ 'es2015' ]
    ]
  }
},

karmaTypescriptConfig: {
    compilerOptions: {
      sourceMap: true,
      target: 'es6'
    },
    bundlerOptions: {
      addNodeGlobals: true,
      sourceMap: true
    },
    tsconfig: './tsconfig.json'
},

Karma is able to transpile -> transform -> bundle this in this setup, but I have whole set of different strange issues (no browser works in this state):

• In es2017 browsers (Chrome): Uncaught Error: Can't find entrypoint for some-test.ts (mocha works fine with no babel transform).
• In old Firefox 44 TypeError: global is undefined.
• In IE 10 Unable to get property 'wrappers' of undefined or null reference.

P.S. - None of aforementioned modules/frameworks is important to me, so I'll be happy with any other working setup, which can do typescript -> babel -> browserstack testing. Thanks!

Brocket

Answer by Jimi Pajala will fit most of the cases but not all of them as babel-plugin-transform-typescrip doesn't support some of typescript features. For my real project I seems to have to use karma with already compiled sources (ES6 into karma with browserify + babel transform). I'll update github with both approaches as soon as I could. – Brocket

Answer 1

I had in mind testing this with using Babel 7 compiler which itself has support for compiling TypeScript, insted of older Babel 6.

Since I was a bit curious if it works this way I forked your repo and made pull request. I also cleaned some of the setting files. You could read through the changes in pull request to get some idea what was done.

Test seems to pass now as expected, cheers! heres pull request

• Changed to @babel/core:^7.0.0 -compiler
• Changed presets for Babel to match babel version 7
• Used babel-core": "^7.0.0-bridge.0 -resolution for avoiding issue when - - modules reference older version of babel
• Gave some additional .tsconfig options
• Some minor changes to karma.conf

EDIT:

I actually do believe you can just drop Babel loader out of the build line and just give karma-typescript -loader parameter to target es5.

es5 is supported by major browsers for a while now and should work in FF 44 also. Classes have also been introduced in es6 and this is why you had problem with classes before, compiling to es5 transforms classes to functions.

karmaTypescriptConfig: {
  compilerOptions: {
    sourceMap: true,
    target: 'es5' // <-- this here

Notability

Unfortunately it doesn't work - since you've removed babel from karma preprocessors it is not invoked when karma is started (it is visible in logs, [preprocessor.babel] is not there). It works in es2017 browsers but not in es2015 browsers, exactly as in my solution. For example FF44 shows an error SyntaxError: class is a reserved identifier as classes were not compiled into functions. When babel added back to preprocessors same exact errors as in my question appear again. – Brocket

Oh my bad, try again with edited fork github.com/bumpah/karma-typescript-babelify – Notability

Hey, with several enabled polyfills it works even in IE10. I'll publish updated version to github mentioning you a bit later. But it has a temporary caveats (I hope they will be fixed one day) as babel-plugin-transform-typescript doesn't support some features of typescript. – Brocket

Great to hear! Babel is very powerful tool with it's polyfills indeed. Yes, it's unfortunately true that Babels typescript support does not cover all cases at least not for now. I have had some issues with generating typing files eg. '*.d.ts' -files but you could just use normal 'tsc' -compiler for generating those with parameter 'emitDeclarationOnly'. This process is a little nuisance I know, but hopefully these will be covered soon. – Notability

regarding your comment about es5: there are several issues which still require babel transfroms. For example new MyError() instanceof MyError (when MyError extends Error) doesn't work without transform-builtin-extend transformation, etc. – Brocket

Answer 2

I discovered alternative way with webpack. So karma -> webpack -> babel.

Here it is a demo project. If you are trying to migrate real project it would have tests. This project solves problems with running DOM tests also.

Rafaelle