CODEWITHSUNDEEP
unit-testingjasminekarma-runnerreactjs
Alexey Sidash
Alexey Sidash

Reputation: 441

Karma-browserify transformations are not done

I've got some problem with karma configuration. The project is being developed using React and Browserify, react components are written using .jsx syntax and project is build with gulp.

Building works fine, but I want to cover ui components with unit tests using karma, jasmine and React.TestUtils.

Also, I use karma-browserify plugin. Generally, it works fine. When i do require('some-module') im my test files, module is imported.

But transformations are not done, when I import some module written in JSX syntax, I get an error:

ERROR [framework.browserify]: bundle error
ERROR [framework.browserify]: Error: Parsing file /path/to/project/src/ui/js/base/icon.jsx: Unexpected token (12:6)

What is wrong in my karma config, why transformations are missed?

module.exports = function (karma) {
  karma.set({
    basePath: './',

    frameworks: ['browserify', 'jasmine'],

    files: ['./**/*.test.js'],

    preprocessors: {
      './**/*.test.js': ['browserify']
    },

    browserify: {
      debug: true,
      transform: ['reactify']
    },

    reporters: ['progress'],

    port: 9876,

    colors: true,

    logLevel: karma.LOG_INFO,

    autoWatch: false,

    browsers: ['Chrome'],

    singleRun: true
  });
};

P.S. I use xubuntu 14.10, node 0.12.4.

Gulp transformation task for browser works fine, it was build like this example

P.P.S. Thanks for your help in advance.

Upvotes: 2

Views: 774

Answers (1)

hthief
hthief

Reputation: 26

I came through this question when looking how to solve my own similar issue. It was the same error, only I'm using babelify transformation, and in my case it was a matter of having the syntax basis wrong, each transformation is an array itself, so after sometime of looking at a very non helpful error, and reading that one line I changed this:

browserify: {
debug: true,
transform: ['babelify',{presets: ["es2015","react"]}],
 extensions: ['.js', '.jsx']}

Became:

browserify: {
debug: true,
transform: [['babelify',{presets: ["es2015","react"]}]],
 extensions: ['.js', '.jsx']}

Not sure how helpful that can be, especially after all this time, but, there ya go

Upvotes: 1

Related Questions