针对 JSX 语法运行 mocha 时出现“意外令牌”错误答案

【问题标题】：Error "Unexpected token" when run mocha against JSX syntax针对 JSX 语法运行 mocha 时出现“意外令牌”错误
【发布时间】：2017-06-22 06:28:44
【问题描述】：

我对 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 | }

这是我从一些文章nyc mocha --compilers js:babel-core/register Rectangle.js得到的mocha命令。

我还在 github (link) 上上传了代码，所以你可以看到安装的依赖项。

我应该如何解决这个问题？有没有我遗漏的步骤？

【问题讨论】：

标签： javascript node.js mocha.js react-jsx

【解决方案1】：

您需要在 package.json 中的 babel 配置中添加 react 预设

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

【讨论】：

【解决方案2】：

我认为您可能需要自定义编译器来帮助您编译 jsx 代码。

您可以在此处查看示例：Mocha-react repo。

【讨论】：