Webpack Jest未分析es6:SyntaxError:意外的令牌导入
我正在尝试用我的网页包项目设置Jest。当我运行测试时,Jest抱怨它无法读取es6代码。巴贝尔似乎没有转换我的测试文件 我尝试过在互联网上找到的各种解决方案,但我仍然感到困惑。也许有人有更多的巴别塔/网页包知识,可以看看我的配置,帮助我 相关package.json脚本:Webpack Jest未分析es6:SyntaxError:意外的令牌导入,webpack,jestjs,babeljs,Webpack,Jestjs,Babeljs,我正在尝试用我的网页包项目设置Jest。当我运行测试时,Jest抱怨它无法读取es6代码。巴贝尔似乎没有转换我的测试文件 我尝试过在互联网上找到的各种解决方案,但我仍然感到困惑。也许有人有更多的巴别塔/网页包知识,可以看看我的配置,帮助我 相关package.json脚本: { "test": "jest --no-cache --config config/jest.config.js" } 相关package.json deps: "@babel/core": "^7.2.2",
{
"test": "jest --no-cache --config config/jest.config.js"
}
相关package.json deps:
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/preset-env": "^7.3.1",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.0.0",
"babel-loader": "^8.0.5",
"babel-plugin-styled-components": "^1.10.0",
"jest": "^24.0.0",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
config/webpack.config.js:
entry: './src/index.js',
mode: isProduction ? 'production' : 'development',
devtool: isProduction ? 'none' : 'inline-source-map',
bail: true,
devServer: {
contentBase: 'build',
compress: true,
port: 3000,
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].[chunkhash].js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-flow',
],
plugins: [
'babel-plugin-styled-components',
'@babel/plugin-proposal-class-properties',
],
},
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html',
}),
new webpack.DefinePlugin({
'process.env': JSON.stringify(process.env),
}),
],
config/jest.config.js
module.exports = {
verbose: true,
rootDir: '../',
setupFiles: ['./config/jest.setup.js'],
transform: {
'^.+\\.js?$': 'babel-jest',
},
config/jest.setup.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
笑话错误:
● 测试套件无法运行
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
详细信息:
//config/jest.setup.js:1
({“Object.”:函数(模块、导出、require、u dirname、u filename、全局、jest){从“酶”导入酶;
^^^^^^
SyntaxError:意外的令牌导入
我想要一个运行测试的人!我猜我的转换是:babel jest在我的jest.config.js中什么都没做…你需要做两件事:
Babel.config.js
):
这是必要的,因为babel jest
依赖于传统的babel配置文件,而不是Web包。由于版本7,babel支持JS配置为babel.config.JS
当使用JS Babel配置时(例如,与.babelrc
相反),Jest还编译节点中的模块。
。按照惯例,这必须位于项目的根目录中,与Jest配置文件一起
以下是基于webpack.config.js
文件中的Babel选项的配置:
//babel.config.js
module.exports={
预设:[
“@babel/preset env”,
“@babel/preset react”,
“@babel/预设流量”,
],
插件:[
“babel插件样式组件”,
“@babel/plugin提案类属性”,
]
}
巴别塔核心
桥接版本:
npm安装巴别塔-core@7.0.0-bridge.0--保存开发人员
发件人:
这个repo包含了我们称之为“桥接”的包,旨在简化使用“babel core”作为babel 6对等依赖项的库的转换
Babel 7向scopes过渡的问题是,如果一个包依赖于Babel 6,那么他们可能希望同时添加对Babel 7的支持。因为Babel 7将以@Babel/core而不是Babel core的形式发布,所以维护人员在不进行突破性更改的情况下无法完成该过渡
我有一些有用的信息,可以作为以后看到这个问题的人的参考 默认情况下,jest配置中的transformIgnorePatterns为 如果一些家伙的问题是由节点_模块中的一些代码引起的,并且没有覆盖这个值,那么babel jest仍然不起作用
也许正确的值是这样的“/node_modules/(?!(您的第三部分es模块代码|其他es库))”我遇到了一个类似的情况,我想用jest测试React组件
.js
文件,但失败了,因为该组件导入了.css
样式表。我在Webpack中使用了Babel
根据接受的答案@sdgluck,我不得不添加一个babel.config.js
:
1.
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react']
};
2.我还安装了babeljest
作为开发人员依赖项
3.然后我通读了
4.这使我在我的package.json
中添加了一个“jest”属性,它模拟文件和样式表:
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
}
然后它成功了:)它可以工作!你能解释一下它是如何工作的吗?还有,只有当我的babel.config.js文件在根目录下,并且当我把它和webpack.config.js一起放在我的config文件夹中时,它才会工作。这也让人困惑…@NicholasMueller我更新了答案,并做了一些解释。@sdgluck我在创建一个项目时遇到了同样的问题使用
create react app
。由于配置是隐藏的,我不知道如何进行传输。我所知道的是节点模块中的import
语句没有被传输(因此会抛出一个错误)。上述解决方案没有帮助。有什么想法吗?非常感谢。=)你节省了我的下午(:
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
}
// __mocks__/styleMock.js
module.exports = {};
// __mocks__/fileMock.js
module.exports = 'test-file-stub';