How To Have Tests Be Transpiled?

[micahasmith]

I'm trying to get setup with karma-jspm and i'm wondering, how can i configure it so that my tests are transpiled as well so that i can use es6 from within my tests?

My project is here -> https://github.com/micahasmith/babel-test

I tried adding my test files to my config.js, but i can't get it to let me use any es6 features in my actual test files.

I'm super new. Any help is appreciated. Thanks--

[micahasmith]

Any ideas here?

[XVincentX]

:+1: for this. I have got the same issue. The thing is that this package is using custom path properties to specify files and tests, so any preprocessor will not work.

Actually, I am forced to write tests in ES5, while my application code is ES6.

[maxwellpeterson-wf]

JSPM itself can interpret ES6 using Traceur or 6to5 (now Babel) as the transpiler. This should just work out of the box.

[sztobar]

Either use babel-proprocessor or traceur-preprocessor to transpile (preprocess) test files and it should work.

[XVincentX]

The thing is that jspm is not using standard files section of karma, so the preprocessor don't work

[sztobar]

Yes but you can preprocess files which are passed to jspm loadFiles section.

[XVincentX]

Hmm...could you make a quick example?

[sztobar]

module.exports = function(config) {
  config.set({
    basePath: process.cwd(),
    frameworks: ['jspm', 'jasmine', 'source-map-support'],
    files: [],
    exclude: [],
    preprocessors: {
      'src/**/*.js': ['babel'],
      'tests/**/*.spec.js': ['babel']
    },
    babelPreprocessor: {
      options: {
        sourceMap: 'inline',
        compact: false
      },
      sourceFileName: function(file) {
        return file.originalPath;
      }
    },
    jspm: {
      useBundles: true,
      config: 'jspm.conf.js',
      packages: 'vendor',
      loadFiles: ['tests/**/*.spec.js'],
      serveFiles: ['src/**/*.{js,html}']
    },
    reporters: ['story'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: [
      'Chrome'
    ],
    singleRun: true
  });
};

[nightire]

Don't know why you guys need to declare preprocessors, for me it just works out of the box, the only thing I've edited from original karma configuration are these:

frameworks: [
    'chai-as-promised',
    'sinon-chai',
    'mocha',
    'jspm'
],

// files: [
// ],
jspm: {
    serveFiles: [
        'source/**/*.js'
    ],
    loadFiles: [
        'test/**/*.js'
    ]
},

...

[XVincentX]

@nightire Could you provide a full working example? I tried your stuff, but it does not transpile the code.

[nightire]

@XVincentX Sure, here is the project I mentioned before, currently you won't see much code because I have not update it with recently changes, but for now it is enough to run two test examples with ES6 syntax.

https://github.com/visionet/re-sloth

BTW, there's a bug in test/bootstrap.test.js which causes error when using babel as transpiler (at that time, babel doesn't expose mocha as this correctly), so you'll see I use traceur instead. Later I've fixed this issue. If you know Chinese, there's an article I wrote to guide how to use jspm with angular 1.x also with tests: http://div.io/topic/950

[j-walker23]

Really wish i knew chinese right about now.

[alexweber]

@j-walker23 @XVincentX I finally managed to get this working in my boilerplate project. Here's a link to the actual test in ES6: https://github.com/alexweber/es6-jspm-gulp-boilerplate/blob/master/test/foo.test.js

PS - @nightire thanks, your project was a great resource!

[myitcv]

@sztobar - I notice in your example you reference source-map-support. I've just tried to configure my project to avoid callstacks referencing the transpiled files, e.g.

Chrome 44.0.2403 (Linux 0.0.0) React Component Test should trigger a change event FAILED
        TypeError: Cannot read property 'remove' of undefined
            at /path/to/some/file.js!transpiled:832:18

However I've not had much luck with this config:

module.exports = function(config) {
    config.set({
        autoWatch : true,
        basePath : '',
        frameworks : ['jspm', 'jasmine', 'source-map-support'],
        browserDisconnectTimeout : 5000,
        browsers : ['Chrome'],
        babelPreprocessor: {
            options: {
                sourceMap: 'inline',
                compact: false
            },
            sourceFileName: function(file) {
                return file.originalPath;
            }
        },
        jspm: {
            loadFiles: ['app/js/**/*.spec.js'],
            serveFiles: ['app/js/**/*.js']
        },
        reporters: ['coverage','progress'],
        colors: true,
        port: 9876,
        singleRun: false,
        exclude: []
    });
};

Any thoughts?

What does your config.js look like?

Thanks