Wednesday, 7 June 2017

Karma Babel Unexpected Token Issues

I'm struggling with my babel/webpack/react/karma testing setup for an opensource project that I'm working on. https://github.com/seanoshea/fuzzymatchingjs has all the source code, but I've tried ro highlight the relevant buts which are causing some issues so far.

When I run the browser-based tests:

/Users/sean.oshea/github/fuzzymatchingjs/example
bos-mac-soshea:example sean.oshea$ yarn karma
yarn karma v0.24.5
$ karma start karma.conf.js 
07 06 2017 13:47:16.538:WARN [karma]: No captured browser, open http://localhost:9876/
Hash: deb898c3db6aa3e926c0
Version: webpack 2.6.1

I get errors in the console which state:

ERROR in ./src/App.js
Module build failed: SyntaxError: Unexpected token (19:27)

  17 |   }
  18 | 
> 19 |   handleFuzzyMatchingClick = (e) => {
     |                            ^
  20 |     e.preventDefault();
  21 |     this.setState({fuzzyMatchingResult: fuzzyMatching.fuzzyMatchPattern(this.state.fuzzyMatchingText, this.state.fuzzyMatchingPattern, 0)});
  22 |   }

It appears that the configuration I'm using is resulting in the App.js file (https://github.com/seanoshea/fuzzymatchingjs/blob/develop/example/src/App.js) not being transpiled into browser-friendly JavaScript.

When I run the application normally:

/Users/sean.oshea/github/fuzzymatchingjs/example
bos-mac-soshea:example sean.oshea$ yarn start

Compiled successfully!

You can now view example in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://10.10.176.225:3000/

Note that the development build is not optimized.
To create a production build, use yarn run build.

The example application runs fine and App.js works as expected.

https://github.com/seanoshea/fuzzymatchingjs/blob/develop/example/karma.conf.js is what my karma configuration looks like. With https://github.com/seanoshea/fuzzymatchingjs/blob/develop/example/karma.conf.js#L24, I'd be epecting my source files to be transpiled before trying to run the test, but that doesn't appear to be the case. https://github.com/seanoshea/fuzzymatchingjs/blob/develop/example/test/App-test.js#L3 is where I've tried to include the functionality from App.js in my unit tests, but when I do this, I get the 'Unexpected token' errors outlined at the start of this question.

Can anyone spot anything amiss with my karma/webpack/babel configuration? If there's an easier way to do this, I'm not particularly tied to karma, so would definitely be open to other tooling.

Thanks



via seanoshea

No comments:

Post a Comment