prop本机Jest SyntaxError:找到重复的__self道具

Question

不过，在用创建-反应-本机应用构建的一个相当典型的创建-反应-本机应用应用程序中，还没有成功运行这个程序--奇怪的是，这个程序只通过了一次，然后在CI中重新安装了节点模块之后就失败了。所以我一定在附近。

内部错误消息状态

找到了重复的__self道具。您最可能使用的是不推荐的转换-react jsx-self Babel插件。使用自动运行时，__source和__self都会自动设置。请从您的Babel配置中移除transform-react jsx源和transform-react jsx-self。

我没有显式地在任何地方使用transform-react-jsx-source或transform-react-jsx-self，但是我在我的yarn.lock中看到了它们，因此它们必须是传递依赖关系。

以下是jest的输出

> jest

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

    SyntaxError: my-project...../src/__tests__/App.js: Duplicate __self prop found. You are most likely using the deprecated transform-react-jsx-self Babel plugin. Both __source and __self are automatically set when using the automatic runtime. Please remove transform-react-jsx-source and transform-react-jsx-self from your Babel config.
      11 | 
      12 | it('renders correctly', async () => {
    > 13 |   renderer.create(<App />);
         |                   ^^^^^^^
      14 | });
      15 | 

      at File.buildCodeFrameError (node_modules/react-native/node_modules/metro-react-native-babel-transformer/node_modules/@babel/core/lib/transformation/file/file.js:248:12)
      at NodePath.buildCodeFrameError (node_modules/@babel/traverse/lib/path/index.js:138:21)
      at sourceSelfError (node_modules/@babel/helper-builder-react-jsx-experimental/lib/index.js:699:17)
      at buildCreateElementOpeningElementAttributes (node_modules/@babel/helper-builder-react-jsx-experimental/lib/index.js:655:32)
      at buildCreateElementCall (node_modules/@babel/helper-builder-react-jsx-experimental/lib/index.js:615:21)
      at PluginPass.exit (node_modules/@babel/helper-builder-react-jsx-experimental/lib/index.js:97:22)
      at newFn (node_modules/@babel/traverse/lib/visitors.js:175:21)
      at NodePath._call (node_modules/@babel/traverse/lib/path/context.js:55:20)
      at NodePath.call (node_modules/@babel/traverse/lib/path/context.js:42:17)
      at NodePath.visit (node_modules/@babel/traverse/lib/path/context.js:101:8)

这是我的整个package.json

{
  "type": "module",
  "main": "index.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@expo-google-fonts/baloo-2": "^0.1.0",
    "@expo-google-fonts/squada-one": "^0.1.0",
    "@reduxjs/toolkit": "^1.5.0",
    "expo": "~39.0.2",
    "expo-font": "~8.3.0",
    "expo-splash-screen": "~0.6.2",
    "expo-status-bar": "~1.0.2",
    "expo-updates": "~0.3.2",
    "history": "^5.0.0",
    "immer": "^8.0.0",
    "intl": "^1.2.5",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-intl": "^5.10.6",
    "react-native": "~0.63.3",
    "react-native-gesture-handler": "~1.7.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-screens": "~2.10.1",
    "react-native-unimodules": "~0.11.0",
    "react-native-web": "~0.13.12",
    "react-redux": "^7.2.2",
    "react-router": "^5.2.0",
    "react-router-native": "^5.2.0",
    "reselect": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "babel-jest": "~25.2.6",
    "jest": "~25.2.6",
    "react-test-renderer": "~16.13.1"
  },
  "jest": {
    "preset": "react-native",
    "moduleDirectories": [
      "node_modules",
      "src"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?)?$",
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "node"
    ],
    "moduleNameMapper": {
      "^.+\\.(css|less|scss)$": "identity-obj-proxy",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js"
    },
    "transformIgnorePatterns": [
      "^.+\\.(ttf)$"
    ]
  },
  "private": true
}

这是我的babel.config.cjs

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

Answer 1

我遵循了升级到Reactive17并切换到@babel/preset-react的步骤，就像官方React 介绍新的JSX变换中一样

添加到package.json中

  "@babel/preset-react": "^7.12.10",

在package.json中升级

  "react": "17.0.1",
  "react-dom": "17.0.1",

改性babel.config.cjs

module.exports = function (api) {
    api.cache(true);
    return {
        "presets": [
            ["@babel/preset-react", {
                "runtime": "automatic"
            }]
        ]
    };
};