Using Jest within webpack 4 project throws 'Jest encountered an unexpected token' error

Question

I am trying to include Jest in my current React app project to do some testing.

This worked great for a simple javascript file, but when I try and reference a file which uses import it throws the error 'Jest encountered an unexpected token'

I've been looking through the following guide and found I didn't have a.bablerc file

https://jestjs.io/docs/en/webpack

So I added one with the following, as per the example, but this has had no affect when I run npm run test

// .babelrc
{
  "presets": [["env", {"modules": false}]],

  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

My current package.json I have added the following as per the instructions on a different page.

 "scripts": {
    "test": "jest"
  },

My webpack config.js file looks like this.

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const bundleOutputDir = './wwwroot/dist';

const javascriptExclude = [];

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);

    const javascriptExclude = [
        /(node_modules|bower_components)/,
        path.resolve('./ClientApp/scripts/thirdParty')
    ];

    // if dev build then exclude our js files from being transpiled to help speed up build time
    if (isDevBuild) {
        javascriptExclude.push(path.resolve('./ClientApp/scripts'));
    }

    return [
        {
            stats: { modules: false },
            entry: { main: "./ClientApp/index.js" },
            resolve: { extensions: [".js", ".jsx"] },
            output: {
                path: path.join(__dirname, bundleOutputDir),
                filename: "[name].js",
                publicPath: "dist/"
            },
            module: {
                rules: [
                    {
                        test: /\.js$/,
                        exclude: javascriptExclude,
                        use: {
                            loader: "babel-loader",
                            options: {
                                presets: ["babel-preset-env", "react", 'stage-2'],
                                plugins: [
                                    "react-hot-loader/babel",
                                    "transform-class-properties"
                                ],
                                compact: false
                            }
                        }
                    },
                    {
                        test: /\.css$/,
                        use: isDevBuild
                            ? ["style-loader", "css-loader"]
                            : ExtractTextPlugin.extract({ use: "css-loader?minimize" })
                    },
                    {
                        test: /\.(jpe|gif|png|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/, use: [
                            {
                                loader: 'url-loader',
                                options: {
                                    limit: 25000,
                                    publicPath: '/dist/'
                                },
                            },
                        ]
                    }
                ]
            },
            plugins: [
                new webpack.DllReferencePlugin({
                    context: __dirname,
                    manifest: require("./wwwroot/dist/vendor-manifest.json")
                })
            ].concat(
                isDevBuild
                    ? [
                        // Plugins that apply in development builds only
                        new webpack.SourceMapDevToolPlugin({
                            filename: "[file].map", // Remove this line if you prefer inline source maps
                            moduleFilenameTemplate: path.relative(
                                bundleOutputDir,
                                "[resourcePath]"
                            ) // Point sourcemap entries to the original file locations on disk
                        })
                    ]
                    : [
                        // Plugins that apply in production builds only
                        new webpack.optimize.UglifyJsPlugin(),
                        new ExtractTextPlugin("style.css"),
                        new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('production') } })
                    ]
            )
        }
    ];
};

My example file I want to import from:

MyTestFile.js

export const Sum = (a, b) => {
    return a + b;
}

MyTestFile.test.js

import { Sum } from './MyTestFile'

test('Add 1 + 2 = 3', () => {
    expect(Sum(1,2)).toEqual(3);
});

Can anyone help?

Answer 1

I have managed to get it to work using snippets from this answer... thanks to @sdgluck for pointing this out

Jest not parsing es6: SyntaxError: Unexpected token import

package.json

 "scripts": {
    "test": "jest --config jest.config.js"
  },

Added babel.config.js

// babel.config.js
module.exports = {
    presets: [
        '@babel/preset-env'
    ]
}

Added jest.config.js

module.exports = {
    verbose: true,
    rootDir: '../',
    transform: {
        '^.+\\.js?$': 'babel-jest',
    }
}

Then it all worked