运行摩卡时对JSX语法运行错误“Unexpected token”错误

Question

我是JavaScript编程的新手。我试着用JSX格式编写脚本的测试，但有点它与Unexpected token失败。

这里是测试代码，我还没有写任何测试。

//Rectangle.js 
let assert = require('chai').assert, 
    path = require('path'); 

import Rectangle from './Rectangle'; 

这里是一个需要被测试

//Rectangle.jsx 
import React from 'react'; 

class Rectangle extends React.Component { 
    render() { 
     return <h1>Hello, {this.props.name}</h1>; 
    } 
} 

代码下面是错误

SyntaxError: Rectangle.jsx: Unexpected token (5:11) 
    3 | class Rectangle extends React.Component { 
    4 | render() { 
> 5 |  return <h1>Hello, {this.props.name}</h1>; 
    |   ^
    6 | } 
    7 | } 

这里的mocha命令，我从一些文章nyc mocha --compilers js:babel-core/register Rectangle.js了。

我也上传了github上的代码（link），所以你可以看到已安装的依赖关系。

我该如何解决这个问题？我错过了一个步骤吗？

Answer 1

您需要react预设添加到你内心的package.json

"babel": { 
    "presets": ["es2015", "react"] 
} 

Answer 2

通天配置我想你可能需要定制编译器，以帮助您编译代码JSX。

你可以在这里看到这个例子：Mocha-react repo。