Jest 和 Webpack - 意外的令牌导入

我很难设置我的测试套件。我有一个 React + Redux + Webpack 项目，正在尝试添加 Jest。我可以运行测试，但是我无法import任何东西到我的测试文件中。例如，当尝试导入我的 redux 操作时，我收到以下错误：

/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 配置中所定义），并且测试文件似乎没有考虑这些别名。

如果 loader 无法工作，你的 webpack.config.js 就会变得一团糟，因为如果你的 webpack 配置设置为正确使用 babel-loader，你就不需要 .babelrc 文件。下面是一个如何在不使用 .babelrc 文件的情况下使用 Webpack 加载模块的极简示例...正如您所看到的，我正在使用 babel-preset-latest 包。

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