Использование Jest в проекте webpack 4 выдает ошибку «Jest обнаружил неожиданный токен»

Question

Я пытаюсь включить Jest в свой текущий проект приложения React, чтобы провести некоторое тестирование.

Это прекрасно работает для простого файла javascript, но когда я пытаюсь сослаться на файл, который использует импорт, он выдает ошибку'Jest обнаружил неожиданный токен'

Я просматривал следующее руководство и обнаружил, что у меня нет файла .bablerc

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

Так что я добавил один со следующим, как в примере, но это не оказало никакого влияния, когда я запускаю npm run test

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

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

Мой текущий пакет.json Я добавил следующее в соответствии с инструкциями на другой странице.

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

Мой файл webpack config.js выглядит следующим образом.

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

Мой пример файла, который я хочуимпорт из:

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);
});

Кто-нибудь может помочь?

Answer 1

Мне удалось заставить его работать, используя фрагменты из этого ответа ... спасибо @sdgluck за указание на это

Jest не анализирует es6: SyntaxError: Неожиданный импорт токена

package.json

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

Добавлен babel.config.js

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

Добавлен jest.config.js

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

Тогда все этоработал