Jest和Webpack-意外的令牌导入 [英] Jest and Webpack - Unexpected token import

问题描述

我很难设置我的测试套件.我有一个React + Redux + Webpack项目，正在尝试添加Jest.我可以运行测试，但是无法将任何内容import放入测试文件.例如，当尝试导入我的redux动作时，出现以下错误:

I am having a hard time getting my test suite set up. I have a React + Redux + Webpack project and am trying to add Jest. I can get tests to run, however I am unable to import anything into my test files. For example, when trying to import my redux actions, I get the following error:

/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关键字.

I'm guessing my webpack config isn't properly configured and so doesn't recognize the import keyword.

我的webpack配置如下:

My webpack config looks like this:

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的相关部分:

And the relevant part of my 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"
  }
}

更新

我使用{"presets": ["es2015", "react"]}添加了.babelrc文件，并且导入现在可以进行.我还不完全明白为什么会这样(尤其是考虑到以前进口源在起作用).

I added a .babelrc file with {"presets": ["es2015", "react"]} and import is now working. I don't fully understand why though (especially considering imports were working in source previously).

此外，我依赖于项目中的路径别名(在我的webpack配置中定义)，并且这些别名似乎在测试文件中并未得到尊重.

ALSO, I rely upon path aliases within my project (as defined in my webpack config), and these don't appear to be respected from the tests files.

推荐答案

如果加载程序无法正常工作，则您的webpack.config.js都一团糟，因为如果您将webpack配置设置为使用babel，则不需要.babelrc文件-loader正确.下面是一个如何在不使用.babelrc文件的情况下使用Webpack进行模块加载的极简示例.您可以看到我正在使用babel-preset-latest软件包.

Your webpack.config.js is all messed up if loaders are not working as you do not need a .babelrc file if your webpack config is setup to use babel-loader correctly. A minimalist example of how to get module loading with Webpack working without using a .babelrc file is below... as you can see I'm using the babel-preset-latest package.

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

这篇关于Jest和Webpack-意外的令牌导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！