使用 babel 测试 React 组件与 Mocha

Question

我正在尝试使用 enzyme/mocha 测试一个 React 组件，但对如何设置它有点困惑。

这是测试

import React from 'react';
import { expect } from 'chai';
import { shallow, mount, render } from 'enzyme';
import Index from '../../public/js/components/polls/index'

describe("INDEX", function() {
  it("contains a div", function() {
    expect(shallow(<Index />).contains(<div id="index">)).to.equal(true);
  });

});

这是我运行开始测试的命令：

env NODE_ENV=test mocha --compilers js:babel-register --require babel-polyfill --reporter spec --timeout 5000 --recursive

这是我得到的错误：

SyntaxError: /my_app/public/js/components/polls/index.js: Unexpected token (47:10)
  45 |   eachPoll(poll, i) {
  46 |       return(
> 47 |           <Link to={"/poll/" + poll._id} key={poll._id}>
     |           ^
  48 |             <div className="btn btn-info btn-block">
  49 |               {poll.name}
  50 |             </div>

问题似乎出在 JSX 上，但我可以使用 webpack 构建这个组件。我究竟做错了什么？

Answer 1

你应该运行带有 babel-register 选项的 Mocha 运行通过 Babel 的测试：

--compilers js:node_modules/babel-register

确保你的根目录中有一个 .babelrc 文件。它至少应包含 react 预设。

.babelrc 示例：

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

使用 babel 测试 React 组件与 Mocha

Using babel to test react components with Mocha

reactjs

babeljs

enzyme