vendredi 15 janvier 2016

Syntax error when testing React component Jasmine and Webpack

I keep getting an error when trying to run a simple test using React, Karma, Jasmine and Webpack. The error is ' Uncaught SyntaxError: Unexpected token < ', I think my jsx isn't being processed to js, but I don't know why that is happening as I understand webpack should handle that using the babel loader. If anyone can provide advice I would be grateful

Here are my files

karma.conf.js

var webpack = require("webpack"),
  path = require("path");

// Karma configuration

module.exports = function(config) {
  config.set({
    basePath: "",
    frameworks: ["jasmine"],
    files: [
      "../test/!**!/!*.test.js"
    ],
    preprocessors: {
      "./test/!**!/!*.test.js": ["webpack"]
    },
    webpack: {
      module: {
          loaders: [
      {
        test: /\.jsx?$/i,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-1']
        }
      },
      { test: /\.less$/, loader: "style!css!less" }
    ]
  },
      },
      plugins: [
        new webpack.ResolverPlugin([
          new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        ])
      ],
      resolve: {
        root: __dirname,
        extensions: [
          '',
          '.json',
          '.js',
          '.jsx'
        ]
      }
    },
    webpackMiddleware: {
      noInfo: true
    },
    plugins: [
      require("karma-webpack"),
      require("karma-jasmine"),
      require("karma-chrome-launcher")
    ],
    reporters: ["dots"],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ["Chrome"],
    singleRun: false
  });
};

my test file example.test.js

var Comp = require('../../../js/common/components/MyComp.jsx'),
  React = require('react'),
  TestUtils = React.addons.TestUtils;

describe("Component Test", function() {
  it("renders an h1", function () {
    var component = TestUtils.renderIntoDocument(
      <Comp/> // syntax error here
    );

    var h2 = TestUtils.findRenderedDOMComponentWithTag(
      component, 'h2'
    );

    expect(h1).toExist();
  });
});

So the syntax error happens at < Comp... . Thanks!

Aucun commentaire:

Enregistrer un commentaire