React native 使用TransformIgnorePatterns使用Jest反应本机模式-意外标记

我正在尝试在React本机组件上使用Jest运行测试。 使用

反应本机模式

。我对Jest和通用单元测试是新手，所以我不知道如何解决这个问题

我甚至补充说：

transformIgnorePatterns

属性，但问题仍然存在

我的目标是测试模态组件的属性

实际测试：

import 'react-native';
import React from 'react';
import BottomModalComponent from './BottomModalComponent';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

test('renders BottomModalComponent.js', () => {
  const tree = renderer.create(<BottomModalComponent isVisible={false} />).toJSON();
  expect(tree).toMatchSnapshot();
});

依赖项：

  "dependencies": {
    "babel-core": "7.0.0-bridge.0",
    ...
},
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "babel-eslint": "8",
    "babel-jest": "23.6.0",
    "babel-preset-react-native": "^4.0.1",
    "jest": "23.6.0",
    "jest-react-native": "^18.0.0",
    "metro-react-native-babel-preset": "^0.53.1",
    "react-test-renderer": "16.6.0-alpha.8af6728"
  },

babel.config.js

// Project-wide configuration
module.exports = {
  plugins: [
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
};

这就是我的package.json在Jest设置中的样子：

"jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|react-native-modal)/)"
    ]
  },

这是我运行

npm运行测试时出现的错误

Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

SyntaxError: /project_name/node_modules/react-native-modal/src/index.js: Unexpected token (470:8)

      468 |       this.props.useNativeDriver &&
      469 |       !this.state.showContent ? (
    > 470 |         <animatable.View />
          |         ^
      471 |       ) : (
      472 |         children
      473 |       );

Jest遇到意外的令牌
这通常意味着您正试图导入Jest无法解析的文件，例如，它不是纯JavaScript。
默认情况下，如果Jest看到一个Babel配置，它将使用它来转换您的文件，忽略“node_modules”。
SyntaxError:/project\u name/node\u modules/react native modal/src/index.js:意外标记（470:8）
468 | this.props.useNativeDriver&&
469 |       !这个.state.showContent？(
> 470 |         
|         ^
471 |       ) : (
472 |儿童
473 |       );

有什么想法吗？
更新（修复）

调试一段时间后，我注意到问题是我必须添加到项目范围的配置（babel.config.js）：

"presets": [
    "module:metro-react-native-babel-preset",
  ]

由于我只将这一行添加到本地环境
.bablerc
，这就导致了如何传输JSX react本机组件的问题

因此，由于我的两个babel设置都是相同的，所以我可以去掉babel.config.js，一切都正常。
更新（修复）

调试一段时间后，我注意到问题是我必须添加到项目范围的配置（babel.config.js）：

"presets": [
    "module:metro-react-native-babel-preset",
  ]

由于我只将这一行添加到本地环境
.bablerc
，这就导致了如何传输JSX react本机组件的问题

因此，由于我的两个babel设置都是相同的，所以我可以去掉babel.config.js，一切都很好