React Native Jest SyntaxError:发现重复的__self prop [英] React Native Jest SyntaxError: Duplicate __self prop found

问题描述

仍然没有成功地通过一个相当样板的世博会 使用 create-react-native-app<构建的应用/strong>-- 奇怪的是，这通过了一次，然后在我在 CI 中重新安装节点模块后失败了.所以我必须在附近.

Still haven't gotten a successful run of this to pass with a fairly boilerplate Expo app built with create-react-native-app-- strangely, this passed once, and then failed after I re-installed node modules in CI. So I must be near.

内部错误信息说明

发现重复的 __self 道具.您最有可能使用已弃用的 transform-react-jsx-self Babel 插件.__source 和 __self 都是在使用自动运行时自动设置的.请从您的 Babel 配置中删除 transform-react-jsx-source 和 transform-react-jsx-self.

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.

我没有在任何地方明确使用 transform-react-jsx-source 或 transform-react-jsx-self，但我在我的 纱线中看到它们.lock 因此它们必须是可传递的依赖项.

I'm not explicitly using transform-react-jsx-source or transform-react-jsx-self anywhere, but I see them in my yarn.lock so they must be transitive dependencies.

这是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'],
  };
};

推荐答案

TLDR;我按照官方 React 博客 介绍新的 JSX 转换

TLDR; I followed the steps to upgrade to React 17 and switch to @babel/preset-react as in the official React blog Introducing the New JSX Transform

添加到 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"
            }]
        ]
    };
};

这篇关于React Native Jest SyntaxError:发现重复的__self prop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！