Jest and Webpack - Unexpected token import

Question

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

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

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']
    }
};

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"
  }
}

UPDATE

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).

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.

score 1 · Answer 1 · answered Aug 09 '17 at 15:09

1

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"]
              }
          }
      ]
  }

answered Aug 09 '17 at 15:09

Chris Hawkes

11,923
6
58
68

Aside from the Jest tests, my loaders were working properly. The inclusion of the .babelrc file seemed to circumvent that `import` issue, though not entirely sure why. I've tried implementing what you have above (or at least the Webpack 1 equivalent) and omitting the .babelrc file, but still no dice. I'm inclined to think the issue is specifically with the Jest config. – Nicholas Haley Aug 09 '17 at 16:36
According to the Jest docs, Jest requires a .babelrc file, "Don't forget to add a .babelrc file in your project's root folder." – Nicholas Haley Aug 09 '17 at 16:50

Jest and Webpack - Unexpected token import

1 Answers1

Linked