嗨,我正在努力解决这个 Unexpected token 'import' 错误一周。
经过大量搜索,现在我知道这是 babel-register 的问题,它不适用于 mocha 测试,而 webpack serve 工作正常。
起初我在使用 antd 库时遇到了 Unexpected token 'import' 错误,我遵循了其他解决方案,告诉我设置 .babelrc(setting node_modules: false)
但是现在我从我的测试文件中得到了同样的 Unexpected token 'import' 错误。请帮助我...这不是重复的,我已经完成了网络中与此相关的几乎所有解决方案。我很确定 --require babel-register 在 mocha 测试中不起作用。谢谢你。
我的错误信息
CSE_frontend choihongsuk$ npm 运行测试
redux-simple-starter@1.0.0 test /Users/choihongsuk/Desktop/-13-SNUCSE-website-SWPP-/CSE_frontend BABEL_ENV=test mocha --require babel-hook --require babel-register --require ./test /test_hel per.js --recursive ./test
babel-preset-env:
DEBUG
选项使用目标:{}模块转换:假
使用插件:check-es2015-constants {}
transform-es2015-arrow-functions {}
transform-es2015-block-scoped-functions {}
transform-es2015-block-scoping {} transform-es2015-classes {}
transform-es2015-计算属性 {}
transform-es2015-destructuring {} transform-es2015-duplicate-keys {} transform-es2015-for-of {} transform-es2015-function-name {}
transform-es2015-literals {} transform-es2015- object-super {}
transform-es2015-parameters {} transform-es2015-shorthand-properties {} transform-es2015-spread {} transform-es2015-sticky-regex {}
transform-es2015-template-literals {} transform-es2015- typeof-symbol {} transform-es2015-unicode-regex {} transform-regenerator {}
transform-exponentiation-operator {} transform-async-to-generator {} syntax-trailing-function-commas {} /Users/choihongsuk/Desktop/-13-SNUCSE-website-SWPP-/CSE_frontend/test/test_helper.js: 1 (函数 (exports, require, module, __filename, __dirname) { import _$ from 'jquery'; ^^^^^^对象处的 forEach ()。(/Users/choihongsuk/Desktop/-13-SNUCSE-website-SWPP-/CSE_frontend/node_modules/mocha/bin/_mocha:365:10) 在 Module._compile (module.js:649:30) 在 Object.Module。 _extensions..js (module.js:660:10) 在 Module.load (module.js:561:32) 在 tryModuleLoad (module.js:501:12) 在 Function.Module._load (module.js:493: 3)在Function.Module.runMain(module.js:690:10)启动时(bootstrap_node.js:194:16)在bootstrap_node.js:666:3 npm ERR!代码 ELIFECYCLE npm 错误!errno 1 npm 错误!redux-simple-starter@1.0.0 测试:32) 在 tryModuleLoad (module.js:501:12) 在 Function.Module._load (module.js:493:3) 在 Function.Module.runMain (module.js:690:10) 在启动时 (bootstrap_node.js: 194:16) 在 bootstrap_node.js:666:3 npm 错误!代码 ELIFECYCLE npm 错误!errno 1 npm 错误!redux-simple-starter@1.0.0 测试:32) 在 tryModuleLoad (module.js:501:12) 在 Function.Module._load (module.js:493:3) 在 Function.Module.runMain (module.js:690:10) 在启动时 (bootstrap_node.js: 194:16) 在 bootstrap_node.js:666:3 npm 错误!代码 ELIFECYCLE npm 错误!errno 1 npm 错误!redux-simple-starter@1.0.0 测试:
BABEL_ENV=test mocha --require babel-hook --require babel-register --require ./test/test_helper.js --recursive ./test
npm 错误!退出状态 1 npm ERR!npm 错误!在 redux-simple-starter@1.0.0 测试脚本中失败。npm 错误!这可能不是 npm 的问题。上面可能有额外的日志输出。npm 错误!可以在以下位置找到此运行的完整日志:npm ERR!
/Users/choihongsuk/.npm/_logs/2018-05-25T03_45_58_998Z-debug.log
包.json
{
"name": "redux-simple-starter",
"version": "1.0.0",
"description": "Simple starter package for Redux with React and Babel support",
"main": "index.js",
"repository": "git@github.com:StephenGrider/ReduxSimpleStarter.git",
"scripts": {
"start": "webpack-dev-server --progress --colors --open --hot",
"test": "BABEL_ENV=test mocha --require babel-hook --require babel-register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^6.4.1",
"babel-plugin-import": "^1.7.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"css-loader": "^0.28.11",
"enzyme": "^3.3.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^3.5.3",
"react-hot-loader": "^4.1.3",
"react-test-renderer": "^16.3.2",
"style-loader": "^0.21.0",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.9.7"
},
"dependencies": {
"antd": "^3.5.1",
"axios": "^0.18.0",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-polyfill": "^6.26.0",
"babel-preset-stage-1": "^6.1.18",
"babel-runtime": "^6.26.0",
"bootstrap": "^4.1.1",
"core-js": "^2.5.6",
"lodash": "^3.10.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-dropzone": "^4.2.9",
"react-redux": "^5.0.7",
"react-router": "^2.0.1",
"react-router-dom": "^4.2.2",
"reactstrap": "^6.0.1",
"redux": "4.0.0",
"redux-form": "^7.3.0",
"redux-promise": "^0.5.3"
}
}
.babelrc
{
"presets": ["react",[
"env",
{
"modules": false,
"targets": {
"node": "current"
}
}
], "stage-1"
],
"env": {
"test": {
"presets": ["react",
[
"env",
{
"modules": false,
"debug": true
}
],
"stage-1"
]
}
},
"plugins": [
["import",
{ "libraryName": "antd", "libraryDirectory": "es", "style": "css" }],
"transform-decorators-legacy",
"transform-class-properties",
"transform-async-to-generator",
"transform-runtime"
]
}
webpack.config
module.exports = {
entry: ['./src/index.js', 'babel-register'],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
],
},
resolve: {
extensions: ['*', '.js', '.jsx', '.css']
},
devServer: {
historyApiFallback: true,
contentBase: './',
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
},
};
测试助手.js
import _$ from 'jquery';
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-dom/test-utils';
import jsdom from 'jsdom';
import chai, { expect } from 'chai';
import chaiJquery from 'chai-jquery';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from '../src/reducers';
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = global.document.defaultView;
global.navigator = global.window.navigator;
const $ = _$(window);
chaiJquery(chai, chai.util, $);
function renderComponent(ComponentClass, props = {}, state = {}) {
const componentInstance = TestUtils.renderIntoDocument(
<Provider store={createStore(reducers, state)}>
<ComponentClass {...props} />
</Provider>
);
return $(ReactDOM.findDOMNode(componentInstance));
}
$.fn.simulate = function(eventName, value) {
if (value) {
this.val(value);
}
TestUtils.Simulate[eventName](this[0]);
};
export {renderComponent, expect};