热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Babel配置错误:当前未启用对实验语法“jsx”的支持

我正在尝试使用Jest为我的reactjs项目进行单元测试。当我想测试组件的渲染时,出现以下错误:SyntaxErro

我正在尝试使用 Jest 为我的reactjs项目进行单元测试。

当我想测试组件的渲染时,出现以下错误:

SyntaxError: /Users/jk/EpitechProjects/T-WEB-700/CountOfMoney_18/front/src/tests/components/Navbar.test.js:
Support for the experimental syntax 'jsx' isn't currently enabled (9:29):
7 |
8 | test('Navbar : should render navbar', ()=>{
> 9 | const wrapper = shallow();
| ^
10 | expect(wrapper.find('nav').length).toBe(1);
Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of
your Babel config to enable transformation. If you want to leave it as-is,
add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to
enable parsing.

但是,它似乎无法识别JSX语法。

我已经尝试了两者@babel/preset-react@babel/plugin-syntax-jsx建议,但仍然存在相同的错误。

这是我的一些配置文件:

jest.config.json

{
"setupFiles": [
"raf/polyfill",
"/src/setupTests.js"
],
"transform": {
"^.+.(js?)$": "babel-jest"
}
}

babel.config.js

module.exports = {
presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

设置测试.js

//import '@testing-library/jest-dom';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({
adapter: new Adapter()
});

包.json

{
"name": "front",
"version": "0.1.0",
"private": true,
"dependencies": {
...
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/user-event": "^12.2.2",
...
"babel": "^6.23.0",
...
"react": "^17.0.1",
"react-dom": "^17.0.1",
...
"react-scripts": "4.0.0",
"react-test-renderer": "^17.0.1",
...
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"testJ": "jest --cOnfig=jest.config.json"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/plugin-syntax-jsx": "^7.12.1",
"@babel/preset-react": "^7.12.10",
"@testing-library/react": "^11.2.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
"jest": "^26.6.3"

回答


目前的罪魁祸首似乎是你的babel.config.js,你需要让它与@babel/present-react. 所以更新如下:

module.exports = {
presets: [
['@babel/preset-env', {targets: {node: 'current'}}],
['@babel/preset-react', {targets: {node: 'current'}}] // add this
]
};






推荐阅读
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • 自然语言处理(NLP)——LDA模型:对电商购物评论进行情感分析
    目录一、2020数学建模美赛C题简介需求评价内容提供数据二、解题思路三、LDA简介四、代码实现1.数据预处理1.1剔除无用信息1.1.1剔除掉不需要的列1.1.2找出无效评论并剔除 ... [详细]
  • 本文介绍了 Go 语言中的高性能、可扩展、轻量级 Web 框架 Echo。Echo 框架简单易用,仅需几行代码即可启动一个高性能 HTTP 服务。 ... [详细]
  • Android 构建基础流程详解
    Android 构建基础流程详解 ... [详细]
  • 在React中使用setState时遇到错误,本文将详细分析错误原因并提供解决方案。 ... [详细]
  • centos 7.0 lnmp成功安装过程(很乱)
    下载nginx[rootlocalhostsrc]#wgethttp:nginx.orgdownloadnginx-1.7.9.tar.gz--2015-01-2412:55:2 ... [详细]
  • vue引入echarts地图的四种方式
    一、vue中引入echart1、安装echarts:npminstallecharts--save2、在main.js文件中引入echarts实例:  Vue.prototype.$echartsecharts3、在需要用到echart图形的vue文件中引入:   importechartsfrom"echarts";4、如果用到map(地图),还 ... [详细]
  • 使用HTML和JavaScript实现视频截图功能
    本文介绍了如何利用HTML和JavaScript实现从远程MP4、本地摄像头及本地上传的MP4文件中截取视频帧,并展示了具体的实现步骤和示例代码。 ... [详细]
  • WCF类型共享的最佳实践
    在使用WCF服务时,经常会遇到同一个实体类型在不同服务中被生成为不同版本的问题。本文将介绍几种有效的类型共享方法,以解决这一常见问题。 ... [详细]
  • WinMain 函数详解及示例
    本文详细介绍了 WinMain 函数的参数及其用途,并提供了一个具体的示例代码来解析 WinMain 函数的实现。 ... [详细]
  • [转]doc,ppt,xls文件格式转PDF格式http:blog.csdn.netlee353086articledetails7920355确实好用。需要注意的是#import ... [详细]
  • 通过优化动态网络Cookies的全网互通机制,实现了用户在任意子站点的登录和注销操作均能同步至整个网络。具体实现涉及对三个关键文件的修改:首先,在`incDv_ClsMain.asp`中定位并调整`Response.Cookies`的相关设置;其次,更新`global.asa`以确保会话状态的一致性;最后,修改`login.asp`以支持跨域认证。这一改进不仅提升了用户体验,还增强了系统的安全性和可靠性。 ... [详细]
  • 深入浅出 webpack 系列(二):实现 PostCSS 代码的编译与优化
    在前一篇文章中,我们探讨了如何通过基础配置使 Webpack 完成 ES6 代码的编译。本文将深入讲解如何利用 Webpack 实现 PostCSS 代码的编译与优化,包括配置相关插件和加载器,以提升开发效率和代码质量。我们将详细介绍每个步骤,并提供实用示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 本文通过基准测试(Benchmark)对.NET Core环境下Thrift和HTTP客户端的微服务通信性能进行对比分析。基准测试是一种评估系统或组件性能的方法,通过运行一系列标准化的测试来衡量其表现。 ... [详细]
  • 如何使用ES6语法编写Webpack配置文件? ... [详细]
author-avatar
陈公子
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有