Mocha nie rozpozna JSX

Question

Próbuję zaktualizować moje testy jednostkowe za pomocą mocha i enzymu. Kod, który testuję, znajduje się w ES6, używając JSX i React.

Nie udało mi się uzyskać mokki, aby nie błąd w JSX w moim skrypcie testowym.

skryptu testowego:

import React from 'react'; 
import assert from 'assert'; 
import { shallow } from 'enzyme'; 
import SamplePageMain from '../SamplePageMain'; 

describe('<SamplePageMain />',() => { 

    var samplePage = shallow(<SamplePageMain />); 

    it('should render', function() { 
     assert.notEqual(samplePage, null); 
    }); 

});

gulpfile.js:

require('babel-core/register'); 

... 

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

a wyjście jest:

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 | 
> 9 | var samplePage = shallow(<SamplePageMain />); 
    |       ^
    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 | 
> 9 | var samplePage = shallow(<SamplePageMain />); 
    |       ^
    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) 

miałem test pomyślnie uruchomić poprzez uruchomienie kodu źródłowego przez browserify i umieszczenie go w katalogu testowego do udowodnienia że to nie jest mokka/sam enzym. Mój problem polega na tym, żeby po prostu uzyskać magię łyka.

Answer 1

Jest to bardzo powszechny problem dla użytkowników Babel 6, który sam (babel-core) nic nie robi. Wymaga, aby transformaty/wtyczki były podawane do niej podczas transpozycji.

Babel oferuje zestawy popularnych wtyczek jako ustawień wstępnych. Typowe dla projektów React są: babel-preset-2015, babel-preset-react i babel-preset-stage-0. Po KMP ich instalowania, dodać plik .babelrc config, który wygląda mniej więcej tak:

{ 
    "presets": ["react", "es2015", "stage-0"] 
} 

Dla mokka z łykiem kasie tego stosu gulp-mocha how to pass the compilers flag?.

Tutaj przeczytasz o ustawianiu Babel 6 ogólnie https://babeljs.io/blog/2015/10/31/setting-up-babel-6