摩卡不会识别JSX [英] Mocha will not recognise JSX
问题描述
我在测试脚本中无法获取摩卡以免在JSX上出现错误。
测试脚本：
import React from 反应;
从'assert'导入断言;
import {shallow} from'enzyme';
从'../SamplePageMain'导入SamplePageMain;
describe（'< SamplePageMain />'，（）=> {
var samplePage = shallow（< SamplePageMain />）;
it（'should render'，function（）{
assert.notEqual（samplePage，null）;
}）;
}）;
gulpfile.js：
要求（ '巴别核/注册'）;
...
gulp.task（'test'，function（）{
return gulp.src（'scripts / ** / test / * js'，{read：false}）
.pipe（mocha（））;
}）;
，输出为：
gulp test
[16:19:06]使用gulpfile〜/ dev / bikini / gulpfile.js
[16:19:06]开始'测试'...
[16:19:06]'test'错误62 ms
[16:19:06]插件'gulp-mocha'中的SyntaxError
消息：
/Users/me/dev/bikini/scripts/components/test/samplePageMain.js：意外的令牌（9:26）
详细信息：
pos：206
loc：[object Object]
_babel：true
codeFrame：7 |
8 |
> 9 | var samplePage = shallow（< SamplePageMain />）;
| ^
10 |
11 |它（'should render'，function（）{
12 | assert.notEqual（samplePage，null）;
Stack：
SyntaxError：/ Users / me / dev / bikini / scripts / components /test/samplePageMain.js：意外的标记（9:26）
7 |
8 |
> 9 | var samplePage = shallow（< SamplePageMain />）;
| ^
10 |
11 | it（'should render'，function（）{
12 | assert.notEqual（samplePage，null）;
在Parser.pp。 raise（/ Users / me / dev / bikini / node_modules / babel- register / node_modules / babel-core / node_modules / babylon / index.js：1425：13）
在Parser.pp.unexpected（/ Users / me / dev / bikini / node_modules / babel-register / node_modules / babel-core / node_modules / babylon / index.js：2907：8）
在Parser.pp.parseExprAtom（/ Users / me / dev / bikini / node_modules / babel-register / node_modules / babel- core / node_modules / babylon / index.js：754：12）
在Parser.pp.parseExprSubscripts（/ Users / me / dev / bikini / node_modules / bab el-register / node_modules / babel- core / node_modules / babylon / index.js：509：19）
在Parser.pp.parseMaybeUnary（/ Users / me / dev / bikini / node_modules / babel-register / node_modules / babel- core / node_modules / babylon / index.js：489：19）
在Parser.pp.parseExprOps（/ Users / me / dev / bikini / node_modules / babel-register / node_modules / babel- core / node_modules / par / 402：19）
在Parser.pp.parseMaybeAssign（/ Users / me / dev / bikini / node_modules / babel-register / node_modules / babel- core / node_modules / babylon / index.js：365：19）
在Parser.pp.parseExprListItem（/ Users / me / dev / bikini / node_modules / babel-register / node_modules / babel- core / node_modules / babylon / index.js：1232：16）
在Parser.pp .parseCallExpressionArguments（/ Users / me / dev / bikini / node_modules / babel-register / node_modules / babel- core / node_modules / babylon / index.js：585：20）
我已经测试成功运行通过浏览器运行源代码并将其放在测试目录中，以证明它不是摩卡/酶本身。我的问题只是想让gulp的魔法正确。
这对于Babel 6的用户来说是一个很常见的问题，它自己（babel-core）不做任何事情。它需要在透析过程中将转换/插件提供给它。
Babel提供捆绑的常用插件作为预设。反应项目的共同点是 babel-preset-2015 ， babel-preset-react 和 babel -PRESET级-0 。在安装npm之后，添加一个 .babelrc 配置文件，如下所示：
{
预设：[反应，es2015，stage-0]
}
对于摩卡与gulp结帐这个堆栈 gulp-mocha如何传递编译器标志？
请阅读这里关于设置Babel 6一般 https://babeljs.io/blog/2015/10/31/setting-up-babel-6
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.
I have been unable to get mocha to not error on the JSX in my test script.
Test script:
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());
});
and the output is:
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)
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.
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 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"]
}
For mocha with gulp checkout this stack gulp-mocha how to pass the compilers flag?.
And read here about setting up Babel 6 generally https://babeljs.io/blog/2015/10/31/setting-up-babel-6
这篇关于摩卡不会识别JSX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
