Jest和Webpack - 意外令牌导入

Question

我很难让我的测试套件设置。我有一个React + Redux + Webpack项目，并试图添加Jest。我可以运行测试，但是我无法将import任何东西插入到我的测试文件中。例如，试图导入我的终极版动作的时候，我得到以下错误：

/Users/nicholashaley/Desktop/Work/Ada/app/test/test.js:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import * as actions from 'actions'; ^^^^^^ SyntaxError: Unexpected token import

我猜我的WebPack配置没有正确配置，因此无法识别import关键字。

我的WebPack的配置是这样的：

var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var path = require('path'); 
var AssetsPlugin = require('assets-webpack-plugin') 
var assetsPluginInstance = new AssetsPlugin({filename: 'assets.json', prettyPrint: true}) 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

require('dotenv').config() 

module.exports = { 
    entry: './source/app.js', 
    output: { 
     path: __dirname + '/build', 
     publicPath: '/', 
     filename: 'bundle.js' 
    }, 
    externals: { 
     'locker': 'Locker' 
    }, 
    stats : { 
     children: false 
    }, 
    devServer : { 
     historyApiFallback: { 
      disableDotRule: true 
     }, 
     stats : { 
      timings: false, 
      assets: false, 
      chunks: false, 
      modules: false, 
      children: false, 
      publicPath: false 
     }, 
     disableHostCheck: true 
    }, 
    devtool: 'source-map', 
    module: { 
     loaders: [ 
      { 
       test: /\.(jsx|js)$/, 
       exclude: /node_modules/, 
       loader: "babel-loader", 
       query: { presets: [ 'es2015', 'react' ] } 
      }, 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract('css!sass') 
      }, 
      { 
       test: /\.(jpe?g|gif|png|woff|ttf|wav|mp3)$/, 
       loader: "file" 
      }, 
      {include: /\.json$/, loaders: ["json-loader"]}, 
      { 
       test: /\.svg$/, 
       loader: 'svg-sprite?' + JSON.stringify({ 
        name: '[name]_[hash]', 
        prefixize: true 
       }) 
      } 
     ] 
    }, 
    resolve: { 
     root: path.resolve(__dirname), 
     alias: { 
      components: 'source/components', 
      services: 'source/services', 
      selectors: 'source/selectors', 
      middleware: 'source/middleware', 
      stylesheets: 'source/stylesheets', 
      actions: 'source/actions', 
      schemas: 'source/schemas', 
      reducers: 'source/reducers', 
      icons: 'static/icons' 
     }, 
     extensions: ['', '.json','.js', '.jsx'] 
    } 
}; 

而且我的package.json的相关部分：

{ 
    "scripts": { 
    "build": "webpack", 
    "start": "webpack-dev-server --port 3001 --inline --hot", 
    "build-staging": "webpack --config ./webpack-staging.config.js", 
    "build-prod": "webpack --config ./webpack-production.config.js", 
    "deploy": "node deploy.js", 
    "test": "jest", 
    "test:watch": "npm test -- --watch" 
    }, 
    "devDependencies": { 
    "assets-webpack-plugin": "^3.5.0", 
    "babel-core": "^6.14.0", 
    "babel-jest": "^19.0.0", 
    "babel-loader": "^6.2.9", 
    "babel-polyfill": "^6.23.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "colors": "^1.1.2", 
    "css-loader": "^0.26.1", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "file-loader": "^0.10.1", 
    "jest": "^19.0.2", 
    "node-sass": "^3.4.2", 
    "nodemon": "^1.9.1", 
    "react-hot-loader": "^1.3.1", 
    "recursive-readdir": "^2.0.0", 
    "rimraf": "^2.5.4", 
    "sass-loader": "^4.0.2", 
    "style-loader": "^0.13.1", 
    "svg-loader": "0.0.2", 
    "svg-sprite-loader": "^0.3.0", 
    "svg-url-loader": "^1.1.0", 
    "uglify-js": "^2.7.3", 
    "uglifycss": "0.0.21", 
    "webpack": "^1.14.0", 
    "webpack-dev-server": "^1.16.3" 
    } 
} 

UPDATE

我加了一个.babelrc文件，{"presets": ["es2015", "react"]}和导入工作中。我不完全明白为什么（特别是考虑到进口在以前的源代码工作）。

此外，我依赖项目中的路径别名（如我的webpack配置中定义的），并且这些似乎不受测试文件的尊重。

Answer 1

如果你的webpack配置设置为正确使用babel-loader，那么你的webpack.config.js会全部搞乱，因为如果加载器不工作，你不需要.babelrc文件。下面是一个简单的例子，介绍如何使用Webpack工作而不使用.babelrc文件来加载模块，正如你所看到的，我正在使用babel-preset-latest软件包。

module: { 
     rules: [ 
      { 
       loader: "babel-loader", 
       options: { 
        presets: ["latest"] 
       } 
      } 
     ] 
    }