Mocha 无法识别 JSX [英] Mocha will not recognise JSX
问题描述
我正在尝试使用 mocha 和酶来更新我的单元测试.我正在测试的代码在 ES6 中,使用 JSX 和 React.
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.
我无法让 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:
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 魔法正确.
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.
推荐答案
这对于 Babel 6 的用户来说是一个非常常见的问题,它本身 (babel-core) 没有任何作用.它要求在转译期间向其提供转换/插件.
This has been a very common problem for users of Babel 6, which on its own (babel-core) doesn't do anything. It requires that transforms / plugins are fed to it during transpilation.
Babel 提供了一系列常用插件作为预设.React 项目常见的有 babel-preset-2015
、babel-preset-react
和 babel-preset-stage-0
.在 npm 安装它们之后,添加一个 .babelrc
配置文件,如下所示:
Babel offers bundles of common plugins as presets. Common for React projects are babel-preset-2015
, babel-preset-react
and babel-preset-stage-0
. After npm installing them, add a .babelrc
config file that looks something like this:
{
"presets": ["react", "es2015", "stage-0"]
}
对于带有 gulp 的 mocha,请查看此堆栈 gulp-mocha 如何通过编译器标志?.
For mocha with gulp checkout this stack gulp-mocha how to pass the compilers flag?.
在这里阅读有关设置 Babel 6 的一般信息 https:///babeljs.io/blog/2015/10/31/setting-up-babel-6
And read here about setting up Babel 6 generally https://babeljs.io/blog/2015/10/31/setting-up-babel-6
这篇关于Mocha 无法识别 JSX的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!