Unit Testing Syntax error, react, mocha

Question

I'm attempting to set up some tests for my react app with enzyme, mocha and chai. (I'm also using webpack). I have Karma set up for my in-browser tests but i'd like to run these tests with just node.

I'm currently getting a syntax error when it tries to run the test. I'm not sure how to resolve it.

Update: I am running my tests with es6 mocha 'components/**/*.test.js' --recursive --compilers js:babel-register

The error I get is:

   8 | describe('<button />', () => {
   9 |     it('renders something', () => {
> 10 |         const wrapper = shallow(<button />)
  11 |         expect(wrapper).to.be.present
  12 | })

Are you running the tests with ES6? Something like `mocha --compilers js:babel-core/register` ? — Serhii Baraniuk, Aug 03 '16 at 07:40
Yea using `./node_modules/.bin/mocha 'components/**/*.test.js' --recursive --compilers js:babel-register` — Ash, Aug 03 '16 at 07:42
@robertklep oh I don't think I have anything specifically configured..what do I need? — Ash, Aug 03 '16 at 08:09

score 0 · Accepted Answer · answered Aug 03 '16 at 08:19

0

You need to set up Babel before it can handle JSX syntax.

There are two options: add the configuration to your package.json, or create a file called .babelrc that contains the configuration.

First, install babel-preset-react:

$ npm i babel-preset-react --save

Next, add the following to your package.json:

"babel": {
  "presets": [ "react" ]
}

(or add that object, without the "babel" key, to .babelrc)

Another preset that you may likely want to use is babel-preset-es2015, which you can add in a similar fashion (just add it to the presets array).

More documentation on Babel configuration here and here (specifically for es2015).

answered Aug 03 '16 at 08:19

robertklep

198,204
35
394
381

That solved that problem thank you very much! Though now I have the issue where it's hitting my imported sass file and throwing a syntax error. – Ash Aug 03 '16 at 08:29
@Ash ah yeah, that's because of your use of Webpack, no doubt. Perhaps [this question](http://stackoverflow.com/questions/32683440/handle-webpack-css-imports-when-testing-with-mocha) can help you with that. – robertklep Aug 03 '16 at 08:31
1

Solved that styles issue by included ignore-styles and requiring that in my config! Thanks again for your help! – Ash Aug 03 '16 at 08:31
I think `ignore-styles` is actually a better solution :) – robertklep Aug 03 '16 at 08:33
Well i'll certainly take your advice. Would there likely be a situation where I need the styles in the tests? – Ash Aug 03 '16 at 08:50
@Ash I doubt it. Having the ability to "require" styles is a bit of a hack IMO anyway. – robertklep Aug 03 '16 at 08:53
Thanks for your help @robertklep saved my ass! – Ash Aug 04 '16 at 00:21

Unit Testing Syntax error, react, mocha

1 Answers1