Gatsby + Jest 环境下如何启用实验性语法'jsx'的支持？

这个报错是因为Jest运行单元测试时，当前的Babel配置没有启用JSX语法转换能力，无法识别测试文件里的React组件写法。

• 第一步：安装所需依赖
  在项目根目录执行命令安装依赖：
  npm install @babel/preset-react --save-dev
  如果用yarn的话执行：
  yarn add @babel/preset-react --dev

• 第二步：配置Babel
  在项目根目录找到.babelrc或者babel.config.json文件，没有的话新建一个，添加如下配置：

{
  "presets": [
    "babel-preset-gatsby",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ],
  "env": {
    "test": {
      "presets": [
        ["@babel/preset-env", { "targets": { "node": "current" } }],
        ["@babel/preset-react", { "runtime": "automatic" }]
      ]
    }
  }
}

注意：已经存在presets字段的话，只需要把@babel/preset-react的配置补充到对应数组里即可，不需要重复写入整个配置

• 第三步：配置Jest（旧版本Gatsby项目需额外配置）
  打开项目根目录的jest.config.js文件，确保transform配置包含jsx文件的处理规则：

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

• 第四步：清理缓存重跑测试
  先清除Jest和Babel的缓存，再执行测试命令：
  npx jest --clearCache
  然后重新运行你的单元测试命令即可。

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