Question

我很难设置我的测试套件。我有一个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"
  }
}

更新

我添加了一个.babelrc文件{"presets": ["es2015", "react"]}，导入正在运行。我不完全理解为什么（特别是考虑到进口以前在源头工作）。

另外，我依赖于项目中的路径别名（在我的webpack配置中定义），这些似乎没有从测试文件中得到尊重。

Answer 1

如果您的webpack配置设置为正确使用babel-loader，那么如果加载器不能正常工作，您的webpack.config.js就会搞砸了，因为您不需要.babelrc文件。如何在不使用.babelrc文件的情况下使用Webpack进行模块加载的极简主义示例如下所示......您可以看到我正在使用babel-preset-latest软件包。

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

Jest和Webpack - 意外的令牌导入

1 个答案: