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!

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

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.