Jest 不支持ES6语法解决方案

使用官方的例子跑起来是没问题的，但官方使用的是ES5的语法，没有没有使用ES6最新语法，尝试了一下是不行的，在google借鉴了各种办法才找出解决方案，记录一下。

模拟例子

package.json文件

{
  "name": "create-react-app",
  "version": "1.0.0",
  "private": true,
  "dependencies": { "jss": "latest", "jss-preset-default": "latest", "material-ui": "next", "prop-types": "latest", "react": "latest", "react-dom": "latest", "react-jss": "latest", "react-scripts": "latest", "recompose": "latest" },
  "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "jest", "eject": "react-scripts eject" },
  "devDependencies": { "babel-jest": "^21.0.2", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "enzyme": "^2.9.1", "expect": "^21.1.0", "jest": "^21.1.0", "jest-cli": "^21.1.0", "react-test-renderer": "^15.6.1" },
  "jest": { "collectCoverage": true, "testMatch": [ "**/__tests__/**/*.js?(x)" ], "moduleDirectories": [ "node_modules", "src" ], "testPathIgnorePatterns": [ "/node_modules/" ] } }

React组件

import React from 'react';

const STATUS = {
    HOVERED: 'hovered',
    NORMAL: 'normal',
};

class Link extends React.Component {
// state = {无法使用
// class:'asdf' 
// };

    constructor(props) {
        super(props);

        this._onMouseEnter = this._onMouseEnter.bind(this);
        this._onMouseLeave = this._onMouseLeave.bind(this);

        this.state = {
            class: STATUS.NORMAL,
            open:true
        };
    }

    _onMouseEnter () { // = () => 也无法使用
        this.setState({class: STATUS.HOVERED});
    }

    _onMouseLeave () {
        this.setState({class: STATUS.NORMAL});
    }

    render() {
        return (
            <a
                className={this.state.class}
                href={this.props.page || '#'}
                onMouseEnter={this._onMouseEnter}
                onMouseLeave={this._onMouseLeave}>
                {this.props.children}
            </a>
        );
    }

}

export default Link

Jest测试

import React from 'react';
import Link from '../src/mycomp/Link';
import renderer from 'react-test-renderer';

describe('Shallow Rendering', function () {
    it('App\'s title should be Todos', function () {
    const component = renderer.create(
        <Link page="http://www.facebook.com">Facebook</Link>
    );
    let tree = component.toJSON();

    expect(tree.type).not.toBe("b");

    expect(tree).toMatchSnapshot();

    });
});

运行jest命令出现以下错误

   ● Test suite failed to run

    /Users/huanghuanlai/dounine/github/material-ui/examples/create-react-app/src/mycomp/Link.js: Unexpected token (10:7)
         8 | class Link extends React.Component {
         9 |    
      > 10 |    state = {
           |          ^
        11 |        class:'asdf'    
        12 |    };

函数简写异常

 FAIL  __tests__/Link.js
  ● Test suite failed to run

    /Users/huanghuanlai/dounine/github/material-ui/examples/create-react-app/src/mycomp/Link.js: Unexpected token (31:15)
        29 | }
        30 | 
      > 31 | _onMouseLeave = () => {
           | ^
        32 | this.setState({class: STATUS.NORMAL});
        33 | }

解决方案

安装babel-preset-stage-2组件

npm install --save-dev babel-preset-stage-2

修改.babelrc配置文件

{
    "presets": ["es2015", "react", "stage-2"] }

demo项目