Mocha will not recognise JSX
<p>I am trying to update my unit tests by using mocha and enzyme. The code that I am testing is in ES6, using JSX and React.</p>

<p><strong>I have been unable to get mocha to not error on the JSX in my test script.</strong></p>

<p>Test script:</p>

<pre><code>import React from 'react';
import assert from 'assert';
import { shallow } from 'enzyme';
import SamplePageMain from '../SamplePageMain';

describe('&lt;SamplePageMain /&gt;', () =&gt; {

    var samplePage = shallow(&lt;SamplePageMain /&gt;);

    it('should render', function () {
        assert.notEqual(samplePage, null);
    });
</code></pre>

<p>});</p>

<p>gulpfile.js:</p>

<pre><code>require('babel-core/register');

...

gulp.task('test', function() {
    return gulp.src('scripts/**/test/*.js', {read: false})
        .pipe(mocha());
});
</code></pre>

<p>and the output is:</p>

<pre><code>gulp test

[16:19:06] Using gulpfile ~/dev/bikini/gulpfile.js
[16:19:06] Starting 'test'...
[16:19:06] 'test' errored after 62 ms
[16:19:06] SyntaxError in plugin 'gulp-mocha'
Message:
        /Users/me/dev/bikini/scripts/components/test/samplePageMain.js:     Unexpected token (9:26)
Details:
    pos: 206
    loc: [object Object]
    _babel: true
    codeFrame:    7 | 
   8 | 
&gt;  9 |  var samplePage = shallow(&lt;SamplePageMain /&gt;);
     |                           ^
  10 | 
  11 |  it('should render', function () {
  12 |      assert.notEqual(samplePage, null);
Stack:
SyntaxError:     /Users/me/dev/bikini/scripts/components/test/samplePageMain.js:     Unexpected token (9:26)
   7 | 
   8 | 
&gt;  9 |  var samplePage = shallow(&lt;SamplePageMain /&gt;);
     |                           ^
  10 | 
  11 |  it('should render', function () {
  12 |      assert.notEqual(samplePage, null);
    at Parser.pp.raise (/Users/me/dev/bikini/node_modules/babel-    register/node_modules/babel-core/node_modules/babylon/index.js:1425:13)
    at Parser.pp.unexpected (/Users/me/dev/bikini/node_modules/babel-    register/node_modules/babel-core/node_modules/babylon/index.js:2907:8)
    at Parser.pp.parseExprAtom     (/Users/me/dev/bikini/node_modules/babel-register/node_modules/babel-    core/node_modules/babylon/index.js:754:12)
    at Parser.pp.parseExprSubscripts     (/Users/me/dev/bikini/node_modules/babel-register/node_modules/babel-    core/node_modules/babylon/index.js:509:19)
    at Parser.pp.parseMaybeUnary     (/Users/me/dev/bikini/node_modules/babel-register/node_modules/babel-    core/node_modules/babylon/index.js:489:19)
    at Parser.pp.parseExprOps     (/Users/me/dev/bikini/node_modules/babel-register/node_modules/babel-    core/node_modules/babylon/index.js:420:19)
    at Parser.pp.parseMaybeConditional     (/Users/me/dev/bikini/node_modules/babel-register/node_modules/babel-    core/node_modules/babylon/index.js:402:19)
    at Parser.pp.parseMaybeAssign     (/Users/me/dev/bikini/node_modules/babel-register/node_modules/babel-    core/node_modules/babylon/index.js:365:19)
    at Parser.pp.parseExprListItem     (/Users/me/dev/bikini/node_modules/babel-register/node_modules/babel-    core/node_modules/babylon/index.js:1232:16)
    at Parser.pp.parseCallExpressionArguments     (/Users/me/dev/bikini/node_modules/babel-register/node_modules/babel-    core/node_modules/babylon/index.js:585:20)
</code></pre>

<p>I have had the test successfully run by running the source code through browserify and putting it in a test directory to prove that it is not mocha/enzyme itself. My problem is just trying to get the gulp magic right.</p>