使用React Testing Library时Jest解析文件失败问题求助

问题 #

参考React Testing Library相关教程时，教程提到「在命令行运行测试后，你应该能看到App组件的HTML输出」但未明确具体命令。执行npx jest时遇到解析失败错误，错误信息如下：

FAIL src/App.test.js
● Test suite failed to run

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

By default "node_modules" folder is ignored by transformers.

推测教程面向create-react-app用户，但本人使用Webpack手动搭建项目，不清楚如何配置package.json、.babelrc或webpack.config.js解决问题，现求助：

1. 如何解决该解析失败问题？
2. 是否有靠谱的官方或非官方分步教程？

解答 #

1. 解决Jest解析失败的配置步骤 #

由于你使用Webpack手动搭建项目，需为Jest配置Babel支持以解析React和ES6+语法，具体操作如下：

安装依赖

安装Babel与Jest适配的核心包：

npm install --save-dev babel-jest @babel/core @babel/preset-env @babel/preset-react

配置Babel

在项目根目录创建或修改.babelrc文件，添加预设配置：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

若已有babel.config.js，直接修改对应配置即可。

配置Jest

在package.json中添加Jest配置项，指定转换器与测试环境：

{
  "jest": {
    "transform": {
      "^.+\\.(js|jsx)$": "babel-jest"
    },
    "testEnvironment": "jsdom"
  }
}

• transform：告知Jest使用babel-jest处理.js和.jsx文件
• testEnvironment：设置为jsdom以模拟浏览器环境，适配React组件测试

测试命令验证

直接运行：

npx jest

也可在package.json的scripts中添加快捷命令：

{
  "scripts": {
    "test": "jest"
  }
}

后续运行npm test即可执行测试。

若仍存在第三方依赖未转译的问题，可在Jest配置中添加transformIgnorePatterns指定需要转译的包：

{
  "jest": {
    // 其他配置
    "transformIgnorePatterns": [
      "node_modules/(?!(目标依赖包名)/)"
    ]
  }
}

2. 靠谱教程推荐 #

• 官方文档：React Testing Library官方文档包含非create-react-app项目的配置说明，Jest官方文档也提供了Webpack+Babel的完整配置指南，内容权威且更新及时。
• 社区分步教程：搜索Webpack手动搭建React项目的完整教程，这类教程通常会包含Jest+React Testing Library的测试配置环节，从依赖安装到配置文件编写逐一讲解，适配手动搭建场景。

内容的提问来源于stack exchange，提问作者丶 Limeー来夢 丶