Mocha 不会识别 JSX

Question

我正在尝试使用 mocha 和 enzyme 更新我的单元测试。我正在测试的代码是在 ES6 中，使用 JSX 和 React。

我无法让 mocha 在我的测试脚本中的 JSX 上不出错。

测试脚本：

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());
});

输出为：

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)

我已经通过 browserify 运行将源代码运行测试成功运行并将其放在测试目录中以证明它不是 mocha/enzyme 本身。我的问题只是想正确使用 gulp 魔法。

Answer 1

对于 Babel 6 的用户来说，这是一个非常普遍的问题，它本身 (babel-core) 不会做任何事情。它要求在转译过程中向其提供转换/插件。

Babel 提供了常用插件包作为预设。 React 项目常见的是 babel-preset-2015、babel-preset-react 和 babel-preset-stage-0。在 npm 安装它们之后，添加一个看起来像这样的 .babelrc 配置文件：

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

对于 gulp 的摩卡咖啡，请查看此堆栈。

并在此处阅读有关一般设置 Babel 6 的信息https://babeljs.io/blog/2015/10/31/setting-up-babel-6

Mocha 不会识别 JSX

Mocha will not recognise JSX

mocha.js

ecmascript-6

reactjs

gulp

enzyme