在webpack 4项目中使用Jest引发“Jest遇到意外令牌”错误

Question

我正在尝试在我当前的React应用程序项目中加入Jest来进行一些测试。

这对于一个简单的javascript文件非常有效，但是当我尝试引用一个使用import的文件时，它抛出了一个错误“Jest遇到了一个意外的标记”

我一直在看下面的指南，发现我没有.bablerc文件

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

所以，根据示例，我添加了一个带有以下内容的测试，但这对我运行npm运行测试没有影响

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

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

My current package.json我已根据不同页面上的说明添加了以下内容。

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

我的webpackconfig.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',
    }
}

然后一切都成功了