摩卡/酶不识别jsx

Question

我的目标是测试用jsx编写的reactjs代码，用mocha作为测试运行程序、酵素和chai。目前，我正在收到一个unexpectet token错误。

我已经在mocha-will-not-recognise-jsx中尝试了这个解决方案，但是它并没有解决我的错误。

Package.json

{
    "scripts": {
        "test": "mocha --recursive application/**/*.spec.js* --compilers js:babel-register",
    },
    [
    ...
    ],
    "dependencies": {
        "react": "^15.6.1",
        "react-dom": "^15.6.1"
    },
    "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-env": "^1.6.0",
        "babel-preset-react": "^6.24.1",
        "babel-register": "^6.26.0",
        "chai": "^4.1.2",
        "enzyme": "^2.9.1",
        "html-webpack-plugin": "^2.30.1",
        "mocha": "^3.5.0",
        "standard": "^10.0.3",
        "webpack": "^3.5.5",
        "webpack-dev-server": "^2.7.1"
    }
}

Webpack模

module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
            presets: ['react', 'env']
        }
    }]
}

错误消息

D:\Development\game-of-life\node_modules\babel-core\lib\transformation\file\index.js:59
0
    throw err;
    ^

SyntaxError: D:/Development/game-of-life/application/src/components/app/App.spec.jsx: U
nexpected token (8:28)
   6 | describe('App', () => {
   7 |   it('renders "<div>Application is running</div>"', () => {
>  8 |     const wrapper = shallow(<App />)
     |                             ^
   9 |     expect(wrapper.contains(<div>Application is running</div>)).to.be.eql(true)
  10 |   })
  11 | })

我是忘了安装软件包，还是包的更新版本与较旧版本的包不同，因为我已经意识到有着相同的依赖关系，这是一个反应酶项目。

Answer 1

我找到了解决这个问题的两种可行的方法

.babelrc

使用配置.babelrc添加presets: ['react', 'env']。

webpack

添加配置(babelrc: false)以避免.babelrc并使用webpack配置