CODEWITHSUNDEEP
reactjswebpackkarma-jasmine
Rory
Rory

Reputation: 1492

Running React / Redux / Karma / Jasmine / Webpack

I'm getting a fundamental load error when running Karma / Webpack.

My main app/Web site uses Webpack to bundle exported React modules, this works perfectly ok.

When I run my npm test to kick off Webpack and Karma I get this error

    ERROR in ./app/react/components/bots/botShowContainer.js
    Module build failed: SyntaxError: D:/development/poc9-unittests/app/react/components/bots/botShowContainer.js: Unexpected token (11:8)


   9 | const BotShowUI = ({ bot,  onClick  }) => {
  10 |     return(
> 11 |         <div id={bot.id}  onClick={onClick}>
     |         ^
  12 |             {bot.id} : {bot.text}
  13 |         </div>
  14 |     )

I've create a GitHub repo with this small project in it https://github.com/bikerboyroy/poc.git

npm install

npm start, to run localhost:8080

npm test, to run the karma tests

As you'll see the karma tests is failing

The tests fail on the import/export but are complaining about the react syntax. I'm confused !

NOTE: The Web app starts up in angular 1.4 then bridges across to React. I'm only interested in testing the React side of things not the angular bootstrap/startup

Upvotes: 1

Views: 508

Answers (1)

Abhishek Jain
Abhishek Jain

Reputation: 2977

Change your babelrc to include babel-preset-react, and it should work ok. You can now see that it was giving the error. because it didn't knew how to transpile jsx syntax.

{
  "presets": ["es2015", "react"]
}

As an aside, you don't need to specify query option in webpack in loaders section for babel, as you already have babelrc in your project.

Your loader can be just like this:-

  {
    test: /\.js$/,
    loader: "babel",
    exclude: [/node_modules/,  "app/**/*.spec.js"]
  },

Upvotes: 2

Related Questions