Reactjs 用Jest和酶（Symfony）进行反应测试，得到；语法错误：意外的令牌导入“；

我在Symfony中使用React，安装了Jest和Ezyme来测试React组件，但在尝试使用

纱线测试

或甚至

纱线测试运行测试时，无缓存

出现以下错误：

这是我的package.json文件：

{
“依赖性”：{
“@symfony/webpack encore”：“^0.20.1”，
“巴别塔笑话”：“^23.2.0”，
“巴别塔预设环境”：“^1.7.0”，
“babel-preset-es2015”：“^6.24.1”，
“巴别塔预设反应”：“^6.24.1”，
“酶”：“^3.3.0”，
“酶-适配器-反应-16”：“^1.1.1”，
“酶到json”：“^3.3.4”，
“玩笑”：“^23.2.0”，
“开玩笑的酶”：“^6.0.2”，
“网页包通知程序”：“^1.6.0”
},
“依赖项”：{
“axios”：“^0.18.0”，
“巴别塔插件转换对象静止排列”：“^6.26.0”，
“时刻”：“^2.22.2”，
“道具类型”：“^15.6.2”，
“rc日期时间选择器”：“^1.6.1”，
“反应”：“^16.4.1”，
“react dom”：“^16.4.1”，
“react redux”：“^5.0.7”，
“redux”：“^4.0.0”
},
“脚本”：{
“测试”：“玩笑”，
“测试：观察”：“开玩笑——观察”
},
“笑话”：{
“转变”：{
“^.+\\.js$”：“巴别塔笑话”
},
“SetupTestFrameworkScript文件”：“/assets/js/__测试_;/setup/setupEnzyme.js”，
“testPathIgnorePatterns”：[
“/assets/js/\uuuuuu测试/uuuuu/setup/”
]
}
}

我知道这封回复是在帖子创建两年后发出的，但是我在React/Symfony 5/Encore设置下的Jest/Enzyme测试中遇到了类似的问题。以下是针对该问题的有效解决方案：

从webpack.config.js（由Encore使用）注释Babel配置，并使用常规Babel.config.js文件创建自定义配置：

• webpag.config.js-注释Encore

  configureBabelPresetEnv

  babel设置：

/*
*注释为使用babel.config.js
*configureBabelPresetEnv（）的“callback”参数
*将不会使用，因为您的应用程序已提供
*外部巴贝尔配置（例如“.babelrc”或“Babel.config.js”
*文件或“package.json”中的“babel”键）。
*/
//启用@babel/预设环境多边形填充
//.configureBabelPresetEnv（（配置）=>{
//config.useBuiltIns='usage'；
//config.corejs=3；
//})

• babel.config.js-在项目的根目录下创建此配置文件。抓取巴别塔预设并重载部分Encore配置（之前在webpack.config.js中进行了评论）将成为笑话：

module.exports={
预设：[
[
“@babel/preset env”，
{
目标：{
节点：“当前”，
浏览器：[
"> 0.5%",
“最后两个版本”，
“IE 11”
]
},
useBuiltIns:“用法”，
corejs：{
版本：“3”，
建议：正确
}
},
],
['@babel/reset react']，
['@babel/preset-typescript']
],
插件：[“@babel/pluginsyntax jsx”]
};

使用以下文件安装Jest：

• setup.js-在测试目录中创建文件

从“React”导入React；
从“酶”导入{configure}；
从'enzyme-Adapter-react-16'导入适配器；
配置（{adapter:newadapter（）}）；

• 最后使用以下行更新jest.config.js文件：

module.exports={
rootDir:“/资产”，
//测试文件
testRegex:'./assets/js/*test\\\.js$'，
//设置
setupFiles:['/tests/setup.js']，
//用于集成嵌套目录的别名列表
//如果不需要，可以跳过此操作
模块映射：{
“^@constants（.*）$”：“/js/constants”，
“^@containers（.*）$”：“/js/containers”，
“^@store（.*）$”：“/js/store”，
//用于集成样式/图像等的identity obj代理。
//如果不需要，可以跳过此操作
“\\（css | less | scss | jpg | jpeg | png）$”：“身份obj代理”
}
};

我用来使Jest/Ezyme与React/Symfony 5一起工作的依赖项列表：

npm install --save-dev jest
npm install --save-dev enzyme
npm install --save-dev enzyme-adapter-react-16 
npm install --save-dev @babel/plugin-syntax-jsx
npm install --save-dev @babel/preset-typescript
npm install --save-dev identity-obj-proxy

最终实施可在此处找到：

---

瞧，希望这能帮助别人。

看起来你在

.babelrc

文件中遗漏了什么。您可以共享该文件一次吗？没有.babelrc文件，因为它确实包含在webpack.config.js的Encore中（上面包含的代码段中的configureBabel函数）