[英]Using Jest within webpack 4 project throws 'Jest encountered an unexpected token' error
我正在嘗試將 Jest 包含在我當前的 React 應用程序項目中以進行一些測試。
這對於一個簡單的 javascript 文件非常有用,但是當我嘗試引用一個使用 import 的文件時,它會拋出錯誤“Jest 遇到了意外的令牌”
我一直在查看以下指南,發現我沒有 .bablerc 文件
https://jestjs.io/docs/en/webpack
因此,根據示例,我添加了以下內容,但這在我運行 npm 運行測試時沒有影響
// .babelrc
{
"presets": [["env", {"modules": false}]],
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
我當前的 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指出這一點
開玩笑不解析 es6: SyntaxError: Unexpected token import
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',
}
}
然后一切正常
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.