运行React组件测试文件遇Jest无法解析import、JSX语法错误如何解决

一、Jest运行报错修复 #

你遇到的两个报错分别是ES模块import语法不识别、JSX语法不识别，均由Jest缺少对应语法转换配置导致，按以下步骤操作即可修复：

• 第一步：安装必要依赖

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

• 第二步：在项目根目录新建.babelrc配置文件，写入以下内容：

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

如果使用的是React 16及更早版本，去掉@babel/preset-react的额外配置，直接写"@babel/preset-react"即可。

• 第三步：在项目根目录新建jest.config.js配置文件，写入以下基础配置：

module.exports = {
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.(js|jsx)$": "babel-jest"
  },
  moduleFileExtensions: ["js", "jsx"],
  transformIgnorePatterns: ["node_modules/"]
};

配置完成后重新执行npm run test即可解决报错问题。

二、VSCode无expect自动提示修复 #

该问题是当前项目缺少Jest类型定义导致，其他项目正常是因为对应项目已经安装了相关依赖，按以下步骤修复：

• 第一步：安装Jest类型依赖

npm install --save-dev @types/jest

• 第二步：如果安装后仍无提示，在项目根目录新建jsconfig.json文件，写入以下内容：

{
  "typeAcquisition": {
    "include": ["jest"]
  }
}

重启VSCode后即可正常触发expect相关的自动提示。

内容的提问来源于stack exchange，提问作者Daniel