Jest 不支持ES6语法解决方案

来源：互联网发布：杜兰特里约奥运会数据编辑：程序博客网时间：2024/05/16 11:32

使用官方的例子跑起来是没问题的，但官方使用的是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项目

阅读全文

0 0