Javascript 在Webpack4项目中使用Jest抛出';Jest遇到了意外的标记';错误
我正在尝试在我当前的React应用程序项目中加入Jest来进行一些测试 这对于一个简单的javascript文件非常有效,但是当我尝试引用一个使用import的文件时,它抛出了一个错误“Jest遇到了一个意外的标记” 我一直在看下面的指南,发现我没有.bablerc文件 所以,根据示例,我添加了一个带有以下内容的测试,但这对我运行npm运行测试没有影响Javascript 在Webpack4项目中使用Jest抛出';Jest遇到了意外的标记';错误,javascript,testing,webpack,jestjs,Javascript,Testing,Webpack,Jestjs,我正在尝试在我当前的React应用程序项目中加入Jest来进行一些测试 这对于一个简单的javascript文件非常有效,但是当我尝试引用一个使用import的文件时,它抛出了一个错误“Jest遇到了一个意外的标记” 我一直在看下面的指南,发现我没有.bablerc文件 所以,根据示例,我添加了一个带有以下内容的测试,但这对我运行npm运行测试没有影响 // .babelrc { "presets": [["env", {"modules": false}]], "env": {
// .babelrc
{
"presets": [["env", {"modules": false}]],
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
My current package.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);
});
有人能帮忙吗?我用这个答案中的片段设法让它工作起来。。。感谢@sdgluck指出这一点 package.json
"scripts": {
"test": "jest --config jest.config.js"
},
添加了babel.config.js
// babel.config.js
module.exports = {
presets: [
'@babel/preset-env'
]
}
module.exports = {
verbose: true,
rootDir: '../',
transform: {
'^.+\\.js?$': 'babel-jest',
}
}
添加了jest.config.js
// babel.config.js
module.exports = {
presets: [
'@babel/preset-env'
]
}
module.exports = {
verbose: true,
rootDir: '../',
transform: {
'^.+\\.js?$': 'babel-jest',
}
}
然后一切都成功了你能分享失败的测试吗?问题的可能重复并不是关于某个特定的测试失败,而是与它们是我想在测试中引用的文件中的导入有关。感谢链接,我将尝试并报告测试可能会导入一个导入css文件或其他内容的组件,您需要配置jest以将此类模块列入白名单。这可能对你也有帮助。